多个图像文件和使用文件阅读器预览

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>