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>

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

1 个答案: