Question

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

朋友你好。我正在尝试使用jquery ajax修复3个图像上传程序。这就是为什么我根据要求做了一些改变，其中一些是： - 1）我将所有css样式从id转换为class意味着（＃to。） 2）将dataType从json替换为string 3）将pic上传事件从提交更改为文件输入更改事件

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

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

视图： -

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

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

伙计们，请帮我解决这个问题。

Answer 1

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

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

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

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

2 个答案: