input内容改变后,ie11中change事件执行两次的解决办法

来源:互联网 发布:tk 域名 编辑:程序博客网 时间:2024/04/29 19:43

事情是这样的:

页面文件上传,代码如下:

<form id="noflashUpload" enctype="multipart/form-data" action="ajax/uploadDocument.do" method="post" style="margin-left:-80px;">
   <dl class="form-avatar">
       <dd>
        <span id="up_span" style="padding: 2px 5px 2px;border: 1px solid #C0C0C0;margin-bottom: 10px;border-radius: 2px;background: #DDDDDD;overflow: hidden;position: relative;cursor: pointer;*position: relative;">添加文件
<input type="file" id="otherfile" name="file" style="width:60px;opacity: 0;filter:alpha(opacity:0);zoom:1;font-size: 10px;position: absolute;top: 0;right: 0;cursor: pointer;"></span>
<p>支持PDF,DOC,DOCX,PPT,PPTX格式</p>
       </dd>
   </dl>
   </form>

为了能实现貌似一次上传多个文件的功能,上图这个input采取ajax提交,并且每次上传后要把input的值设为空,这样才能进行下一次上传:

$(document).ready(function(){
 $("#otherfile").change(function(){
 var filepath = $(this).val();
 var extStart=filepath.lastIndexOf(".");
 var ext=filepath.substring(extStart,filepath.length).toUpperCase();
 if(ext!=".PDF"&&ext!=".DOC"&&ext!=".DOCX"&&ext!=".PPT"&&ext!=".PPTX"){
 showError("文件限于pdf,doc,docx,ppt,pptx格式");
   return false;
 }
 $("#noflashUpload").ajaxSubmit({
dataType: "json",
cache : false,
beforeSubmit : function(a, f, o) {
showLoading();
},
success : function(data) {
if (data.status == 0) {
showError("文件大小不能超过20M!");
} else {
getMaxOrder();
var max_order = $("#max_order").val();

var tr = "<tr>";
// tr += "<input type='hidden' name='file' value='" + data.filePath + "'>";
tr += "<td><input type='text' class='order' name='order' value='" + (parseInt(max_order)+1) + "' style='width:50px'></td>";
tr += "<td><input type='text' name='document_name' value='" + data.name + "' style='width:100px'/></td><input type='hidden' class='file' name='file' value='${res_root}" + data.filePath + "'></td>";
tr += "<td>" + (data.filePath).substring((data.filePath).lastIndexOf(".")+1, (data.filePath).length).toUpperCase() + "</td>";
// tr += "<td><input type='text' name='post_date' value='" + data.date + "' style='width:100px'/></td>";
tr += "<td><a href='#' class='tr_tmp_delete'>删除</a></td>";
tr += "</tr>";
$("#otherList").append(tr);
$("#otherfile").val("");
$("#max_order").val((parseInt(max_order)+1));
}
},
complete: function(XMLHttpRequest, textStatus){                        
closeLoading(); 
},
error : function(result) {
showError("网络出错,请重新再试!");
}
 });
 

 });

这样问题出现了:其他浏览器都没问题,只有ie11有问题,它把js改变input的value都当作change事件处理了,这样每次点击“添加文件”,事件函数都会执行两次,即使文件上传成功了,也会提示错误信息:("文件限于pdf,doc,docx,ppt,pptx格式");效果如下:



解决办法如下:

先上传,上传之后,把input元素remove掉,再重新添加一次就ok了。可是这时候提示框虽然不提示了,但是只能上传一个文件了,思考一下,这是因为js动态添加的元素上的事件没有添加上去。百度下,使用live绑定就好了。

 $("#otherfile").live("change",function(){
 var filepath = $(this).val();
 var extStart=filepath.lastIndexOf(".");
 var ext=filepath.substring(extStart,filepath.length).toUpperCase();
 if(ext!=".PDF"&&ext!=".DOC"&&ext!=".DOCX"&&ext!=".PPT"&&ext!=".PPTX"){
 showError("文件限于pdf,doc,docx,ppt,pptx格式");
   return false;
 }
 $("#noflashUpload").ajaxSubmit({
dataType: "json",
cache : false,
beforeSubmit : function(a, f, o) {
showLoading();
},
success : function(data) {
if (data.status == 0) {
showError("文件大小不能超过20M!");
} else {
getMaxOrder();
var max_order = $("#max_order").val();

var tr = "<tr>";
// tr += "<input type='hidden' name='file' value='" + data.filePath + "'>";
tr += "<td><input type='text' class='order' name='order' value='" + (parseInt(max_order)+1) + "' style='width:50px'></td>";
tr += "<td><input type='text' name='document_name' value='" + data.name + "' style='width:100px'/></td><input type='hidden' class='file' name='file' value='${res_root}" + data.filePath + "'></td>";
tr += "<td>" + (data.filePath).substring((data.filePath).lastIndexOf(".")+1, (data.filePath).length).toUpperCase() + "</td>";
// tr += "<td><input type='text' name='post_date' value='" + data.date + "' style='width:100px'/></td>";
tr += "<td><a href='#' class='tr_tmp_delete'>删除</a></td>";
tr += "</tr>";
$("#otherList").append(tr);
$("#otherfile").remove();
$("#file_span").append('<input type="file" id="otherfile" name="file" style="width:60px;opacity: 0;filter:alpha(opacity:0);zoom:1;font-size: 10px;position: absolute;top: 0;right: 0;cursor: pointer;">');


$("#max_order").val((parseInt(max_order)+1));
}
},
complete: function(XMLHttpRequest, textStatus){                        
closeLoading(); 
},
error : function(result) {
showError("网络出错,请重新再试!");
}
 });
 
 });


0 0
原创粉丝点击