文件输入jQuery更改事件只触发一次

File input jQuery change event fires only once

本文关键字：一次 jQuery 输入事件文件更新时间：2023-09-26

我使用了插件ref:-[http://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684][1]

我正在尝试使用jQueryajax修复3个图像上传程序。这就是为什么我根据要求进行了一些更改，其中一些是：-

我将所有CSS样式从id转换为class的意思（#to.）
将dataType从JSON替换为字符串
将图片上传事件从提交更改为文件输入更改事件

一切正常，上传的图像和视图显示也成功

现在我的问题是文件输入更改事件只触发一次。我的代码有什么问题？请帮我解决这个问题。

视图：-

<div class="photobox fL">
      <div class="container" title="Choose File">
          <div class="doit">
               <img src="&lt;?php echo base_url();?&gt;images/thumb-5.jpg" id="img1" alt="Upload Photo" width="220px" height="300px;"/>
          </div>    
          <input id="file1" class="hid" name="file1" type="file" size="1/">
      </div>
</div>

site.js:-（外部）

$(function() {
      $('#file1').change(function(e) {
      e.preventDefault();
      $.ajaxFileUpload({
            url :'./upload_image/upload_file/', 
            secureuri :false,
            fileElementId :'file1',
            dataType :'string',
            success : function (path)  //EXECUTES SUCCESSFULLY
            {
               var base_url=loadName();
               var img1 = document.getElementById("img1");
               img1.src = base_url+path; //CHANGE IMG SRC WITH NEW UPLOADED IMAGE SUCCESSFULLY
            }
      });
      return false;
    });
});

我的控制器也运行良好。问题是文件输入更改事件只发生一次。我不使用表单标签，因为我并没有像告诉的那样在提交事件上做上传过程。但我的图像上传仍然很好，只是因为下次更改事件不会触发

请帮我解决这个问题。

**当您添加图像并尝试再次上传同一图像时，由于输入值未更改而未触发更改事件，您应该在过程结束时清除输入值**

$('#imageUpload').on('change', function handleImage(e) {
            //some process
            // then clear the value
            $(this).val(null);
        });

您应该在动态创建的元素上尝试：
这两个事件都是work.on或.bind，例如：

$(document).on('change','#file1',function(e)
{
              e.preventDefault();
              $.ajaxFileUpload({
                    url :'./upload_image/upload_file/', 
                    secureuri :false,
                    fileElementId :'file1',
                    dataType :'string',
                    success : function (path)  //EXECUTES SUCCESSFULLY
                    {
                       var base_url=loadName();
                       var img1 = document.getElementById("img1");
                       img1.src = base_url+path; //CHANGE IMG SRC WITH NEW UPLOADED IMAGE SUCCESSFULLY
                    }
              });
              return false;
});