Javascript 我能'；将图像放入输入字段时不会触发预览

我有一个下拉框可以将图像上传到Cloudinary，这很好，但是当图像被删除时，我无法触发预览功能

这是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>

我已经试过了，但似乎没有得到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]);
        }
   }    
}

函数readURL（输入）{
if（input.files）{
对于（i=0；i
<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);
};

不要传递
dropboxIinput.value
只传递
dropboxInput
当您将参数视为
输入时

更新1

我不确定在不获取更多详细信息的情况下是否可以判断。但是，如果通过将文件放入
元素#dropbox
中，您的
输入#dropboxInput
发生更改，您可以这样编写函数：

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);
    }
  }    
}

函数readURL（输入）{
if（input.files.length）{
对于（i=0；i$（“该解决方案进入了cloudinary fileupload函数，该函数具有drop选项，用于处理删除的文件。输入字段是通过以下Java代码以编程方式生成的：

 String html = cloudinary.uploader().imageUploadTag("file", options, htmlOptions);

这就是drop选项的实现：

$(".cloudinary-fileupload").cloudinary_fileupload({
   ...
   drop: function(e, data){

         readURL(data);

   },
   ...

这个构造的意义是什么？
$（$.parseHTML（''）
它为预览构建了一个图像，就像这样；
$（''）
好的，你是对的，这改进了代码，但不幸的是它没有解决我的问题。你可能指向了正确的方向。设置一个日志来统计收集到readURL（）中的文件，初始设置为NaN，但传递的是readURL（dropboxInput）我得到0。当所有删除的图像都正确上载时。我想知道为什么在删除时，更改事件还不够，就像单击时一样。Kumar，我已经测试了你的函数，它为图像提供了一个更清晰的URL值。但我的问题是，这个处理预览的函数在删除图像文件时不会收到图像文件我已经添加了表示为CLOUDINARY的代码，以防万一。
$(".cloudinary-fileupload").cloudinary_fileupload({
   ...
   drop: function(e, data){

         readURL(data);

   },
   ...