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

Question

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

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

1. 我将所有CSS样式从id转换为类的意思（从＃转换为。]
2. 将dataType从JSON替换为字符串
3. 将图片上传事件从提交更改为文件输入更改事件

一切正常，上传图片并在视图中显示也成功完成

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

查看：-

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

并且我的控制器也可以正常工作。问题是文件输入更改事件仅发生一次。我不使用表单标签，因为我没有按照参考资料所述对Submit事件进行上载过程。但是我的图片上传一次还是可以的，因为下次更改事件不会触发

请帮助我解决这个问题。

Answer 1

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

Answer 2

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

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