文件输入 jQuery 更改事件仅触发一次答案

【问题标题】：File input jQuery change event fires only once文件输入 jQuery 更改事件仅触发一次
【发布时间】：2014-09-17 05:54:02
【问题描述】：

我已经使用插件参考：- [http://code.tutsplus.com/tutorials/how-to-upload-files-with-codeigniter-and-ajax--net-21684][1]

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

我将所有 CSS 样式从 id 转换为 class 表示（# 到 .）
将 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;
    });
});

我的控制器也可以正常工作。问题是文件输入更改事件仅发生一次。我不使用表单标签，因为我没有按照参考中的说明对提交事件进行上传过程。但是我的图片上传仍然可以立即正常工作，只是因为下次更改事件不会触发

请帮我解决这个问题。

【问题讨论】：

尝试使用它 $(document).on('change','#file1',function(e){});直接没有 $(function(){});你也可以使用 .on 或 .bind 方法
上传成功后尝试重置文件输入元素。
感谢@Rocky 你解决了我的问题我想接受你的回答，但我找不到接受评论作为答案的选项再次感谢

标签： javascript php jquery file-upload jquery-events

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您应该在动态创建的元素上尝试一下：
这两个事件都是有效的 .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;
});

【讨论】：