关于input的file框onchange事件触发一次失效的新的解决方法
2015-11-12 20:12
609 查看
转载自:http://blog.csdn.net/wc0077/article/details/42065193
在google了众多方法后,网上有这么几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
但是不知道为什么非常不幸的是,怎么弄我都弄不出。。
后来我脑袋突然闪过一个灵感,我在触发了一次onchange事件后,他没反应,是不是onchange事件没有绑定,后来发现我的推测是正确的,然后我就重新给他绑定了一个onchange事件,测试通过!!!
问题解决!!
[javascript] view
plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
![](https://code.csdn.net/assets/ico_fork.svg)
$("#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;
});
在google了众多方法后,网上有这么几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
但是不知道为什么非常不幸的是,怎么弄我都弄不出。。
后来我脑袋突然闪过一个灵感,我在触发了一次onchange事件后,他没反应,是不是onchange事件没有绑定,后来发现我的推测是正确的,然后我就重新给他绑定了一个onchange事件,测试通过!!!
问题解决!!
[javascript] view
plaincopy
![](https://code.csdn.net/assets/CODE_ico.png)
$("#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;
});
相关文章推荐
- 字符串指定位置插入
- PostgreSQL安装的问题
- Git的认知及基础操作
- 2015-2016 ACM-ICPC, NEERC, Moscow Subregional Contest K. King’s Rout(拓扑排序)
- MarkDown页内跳转实现
- HDU-5532(LIS-nlogn)
- Android Studio开发环境搭建准备
- AsyncTask和Handler对比
- web前端 常用meta标签
- C# 多线程学习系列三:线程优先级、线程同步以及向线程传递参数
- Android 应用签名
- poj 2531 Network Saboteur(经典dfs)
- java jni 入门7 - 访问数组元素
- 字符搜索
- 延迟加载
- 欢迎使用CSDN-markdown编辑器
- 第26讲 项目:投票表决器
- HDU1827:Summer Holiday【强连通】
- hdu 4578 Transformation
- Android动画精讲一:从setTranslationX谈属性动画和view动画的区别