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

事情是这样的：

页面文件上传，代码如下：

<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("网络出错，请重新再试！");

}

});

});