多个图像文件并使用文件 reader 进行预览

Question

我必须上传多个图像文件并且我需要显示图像的预览。但是我在使用 javascript 时遇到的问题是当我上传另一张图片时图像发生了变化，这意味着当我上传 feature_image 时，我之前上传的 product_image 被替换为新的，那里有代码冗余，因为我对不同的不同 ID 使用相同的功能，我如何使用优化的解决方案解决问题。提前致谢

这里是 HTML 部分：

<div class="form-group">
  <label>Product Image</label>
      <input type="file" name="product_image"  id="product_image" width="200px">
      <img src="" id="product-img-tag" width="200px" />  
</div>
<div class="form-group">
    <label>Feature Image</label>
       <input type="file" name="feature_image"  id="feature_image" width="200px">
       <img src="" id="feature-img-tag" width="200px" /> 
</div>
<div class="form-group">
    <label>Slurp Image</label>
       <input type="file" name="slurp_image"  id="slurp_image" width="200px">
       <img src="" id="slurp-img-tag" width="200px" />    
</div>

这是 javascript 部分：

   function readURL(input) {
   if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('#product-img-tag').attr('src', e.target.result);
                  }
                  reader.readAsDataURL(input.files[0]);
              }
          }
          $("#product_image").change(function(){
              readURL(this);
          });

                   function readURL(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('#feature-img-tag').attr('src', e.target.result);
                  }
                  reader.readAsDataURL(input.files[0]);
              }
          }
          $("#feature_image").change(function(){
              readURL(this);
          });

                   function readURL(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('#slurp-img-tag').attr('src', e.target.result);
                  }
                  reader.readAsDataURL(input.files[0]);
              }
          }
          $("#slurp_image").change(function(){
              readURL(this);
          });

Answer 1

优化方案：不要使用FileReader，使用URL.createObjectURL(blob)方法。

当传递给此方法的 blob 来自 <input type="file"> 时，返回的 URI 是指向用户系统上文件的直接指针，因此速度更快，内存消耗更少且更易于使用（因为同步）比 FileReader 及其 toDataURL 方法。

带有您的标记的简短版本

// attach our event listener on all the inputs
document.querySelectorAll('input[type="file"]').forEach(function(input){
  input.addEventListener('change', readURL);
  });

function readURL(evt) {
  // here we can use 'this', it will be the input
  var img = this.nextElementSibling;
  // not really needed in this case but it's a good habit to revoke the blobURI when done
  img.onload = function(){URL.revokeObjectURL(this.src)};
  
  img.src = URL.createObjectURL(this.files[0]);
  }

<div class="form-group">
  <label>Product Image</label>
      <input type="file" name="product_image"  id="product_image" width="200px">
      <img src="" id="product-img-tag" width="200px" />  
</div>
<div class="form-group">
    <label>Feature Image</label>
       <input type="file" name="feature_image"  id="feature_image" width="200px">
       <img src="" id="feature-img-tag" width="200px" /> 
</div>
<div class="form-group">
    <label>Slurp Image</label>
       <input type="file" name="slurp_image"  id="slurp_image" width="200px">
       <img src="" id="slurp-img-tag" width="200px" />    
</div>

更长的版本 基于 ids

document.querySelectorAll('input[type="file"]').forEach(function(input){
  input.addEventListener('change', readURL);
  });

function readURL(evt) {
  var img_id;
  switch(this.id){
    case "product_image" : img_id = "product-img-tag"; break;
    case "feature_image" : img_id = "feature-img-tag"; break;
    case "slurp_image" : img_id = "slurp-img-tag"; break;
    }
  
  var img = document.getElementById(img_id);
  if(!img){
    return;
    }
  img.onload = function(){URL.revokeObjectURL(this.src)};
  img.src = URL.createObjectURL(this.files[0]);
  }

<div class="form-group">
  <label>Product Image</label>
      <input type="file" name="product_image"  id="product_image" width="200px">
      <img src="" id="product-img-tag" width="200px" />  
</div>
<div class="form-group">
    <label>Feature Image</label>
       <input type="file" name="feature_image"  id="feature_image" width="200px">
       <img src="" id="feature-img-tag" width="200px" /> 
</div>
<div class="form-group">
    <label>Slurp Image</label>
       <input type="file" name="slurp_image"  id="slurp_image" width="200px">
       <img src="" id="slurp-img-tag" width="200px" />    
</div>

多个图像文件并使用文件 reader 进行预览

Multiple image files and using file reader to preview

html

javascript

jquery

image

filereader