位置:首页 » 文章/教程分享 » 关于input的file框onchange事件触发一次失效的解决方法

input的file框onchange事件触发一次失效其实很简单,一般是再次选择时是同一个文件,所以没有change,也就是不会触发了。点击取消后,再次选择同一个文件,也是可以的。当然这不是解决的办法。


在google了众多方法后,网上有这么几种方法:

1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框

$("#targetFile").change(function(){  
  var filename = $(this).val();  
  $("#originalTargetFileName").val(filename);  
});  
          
$("#targetUpload").submit(function(){  
  $.ajaxFileUpload({  
    type: "post",  
    url: "${pageContext.request.contextPath}/upload.do",  
    secureuri:false,  
    fileElementId:"targetFile",  
    dataType: "json",  
    success: function(result,status) {  
      if (result.success == "1") {  
          alert("上传文件成功!");  
          var filename=getFileNameFromFilePath(result.fileRelativePath);  
          $("#target_upload_info").html("<div>"+"文件:"+filename+"   <a href='javascript:void(0)' onclick='deletefile("+"\""+result.fileRelativePath+"\",\"target\")'>删除</a>"+"<br/></div>");  
          $("#target_upload_info").css("visibility", "visible");  
          $("#targetFileRelativePath").val(result.fileRelativePath);  
      } else {  
          $("#target_upload_info").html("文件上传失败: " + result.msg);  
          $("#target_upload_info").css({"visibility":"visible", "color":"red"});  
      }  
    },  
    complete: function(xmlHttpRequest) {  
        $("#targetFile").replaceWith('<input type="file" id="targetFile" name="upFile" style="display:none;"/>');  
        $("#targetFile").on("change", function(){  
            var filename = $(this).val();  
            $("#originalTargetFileName").val(filename);  
        });  
    },  
    error: function(data, status, e) {  
        alert("文件上传失败!");  
    }  
  });  
  return false;  
});