javascript - 多个图像文件并使用文件阅读器进行预览

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>

更长版本基于 ID

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>