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("网络出错,请重新再试!");
}
});
});
- input内容改变后,ie11中change事件执行两次的解决办法
- input内容改变后,ie11中change事件执行两次的解决办法
- input 内容改变——change事件
- 有关input输入框内容改变后的触发事件
- js中input标签内容改变的触发事件
- input file域的value清空与赋默认值方法,及Jquery中file的change事件只能执行一次,不可多次执行的解决办法
- input 输入完成时执行的事件change事件
- 捕获input 文本框内容改变的事件
- input标签内容改变的触发事件
- input标签内容改变的触发事件
- input标签内容改变的触发事件
- input标签内容改变的触发事件
- input标签内容改变的触发事件
- input标签内容改变的触发事件
- 【JS事件】input文本内容改变可使用的事件
- JSP中input内容改变触发onchange事件使用
- QT一个事件被重复执行两次的解决办法
- JQ的input change事件
- 我们的空间是圆的么——基于Poicare的宇宙模型浅谈
- 【java】集合框架和map基础
- 小型机更换HBA卡步骤
- 摘录:JAVA学习之路
- CSU1403: 三角形面积
- input内容改变后,ie11中change事件执行两次的解决办法
- centos6.5下安装mono3.6和monodevelop5.0.1
- Connect(并查集+暴力判边)
- Windows 下很有用的开发工具
- 7 超长整数运算(大数运算)
- Lucene中的TermQuery
- hdu-2209 翻纸牌游戏
- hdu 4010 (LCT模板)
- C2_if条件语句