将图像放入输入字段时,如何解决无法触发预览?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (26)

这是HTML代码:

<div class="card text-muted">
    <label id="upload" for="dropboxInput" class="card-block text-muted">
       <input type="file" name="file" data-url="CLOUDINARY_URL"
              data-form-data="{CLOUDINARY STUFF}" 
              data-cloudinary-field="file" class="cloudinary-fileupload"
              multiple="multiple" style="display:none" id="dropboxInput">
  </label>                        
</div>

这是触发该功能的代码,在单击下拉框后选择图像时可以正常工作:

var dropboxInput = document.getElementById("dropboxInput");
dropboxInput.onchange = function(){readURL(this)};

我试过这个,但似乎没有得到dropboxInput.value。上传下载的图像:

var dropbox = document.getElementById("dropbox");
dropbox.ondrop = function(){
    readURL(dropboxInput);
};

这是处理预览的预览功能:

function readURL(input){
   if(input.files){

       for (i = 0; i < input.files.length; i++) {
           var reader = new FileReader();

           reader.onload = function(event) {
                 $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(preview);
           }
        reader.readAsDataURL(input.files[i]);
        }
   }    
}

在输入字段CLOUDINARY STUFF是这样的:

<input type="file" name="file" data-url="https://api.cloudinary.com/v1_1/MYACCOUNT/auto/upload" 
data-form-data="{&quot;eager&quot;:&quot;c_limit,h_768,w_1024&quot;,&quot;signature&quot;:&quot;1f5c7426f428ebd02bb45180767fd920716cc59e&quot;,&quot;api_key&quot;:&quot;185516472314647&quot;,&quot;eager_async&quot;:true,&quot;callback&quot;:&quot;/cloudinary_cors.html&quot;,&quot;tags&quot;:&quot;Punta de Vistalegre,2&quot;,&quot;use_filename&quot;:true,&quot;timestamp&quot;:&quot;1527959323&quot;}" 
data-cloudinary-field="file" class="cloudinary-fileupload"
multiple="multiple" style="display:none" id="dropboxInput">

当图像被删除时,我没有找到将它们传递给readURL()函数的方法。

提问于
用户回答回答于

当你在做:

dropbox.ondrop = function(){
  readURL(dropboxInput.value);
};

你可以像这样编写你的函数:

function readURL(input){
  if(input.files.length){
    for (i = 0; i < input.files.length; i++) {
      image_url = window.URL.createObjectURL(input.files[i]);
      $("<img>", {
        src: image_url
      }).appendTo(preview);
    }
  }    
}

扫码关注云+社区

领取腾讯云代金券