关于input的file框onchange事件触发一次失效的新的解决方法
在google了众多方法后,网上有这么几种方法:
1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框
但是不知道为什么非常不幸的是,怎么弄我都弄不出。。
后来我脑袋突然闪过一个灵感,我在触发了一次onchange事件后,他没反应,是不是onchange事件没有绑定,后来发现我的推测是正确的,然后我就重新给他绑定了一个onchange事件,测试通过!!!
问题解决!!
$("#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;
});
关于input的file框onchange事件触发一次失效的新的解决方法的更多相关文章
- html input的file文件输入框onchange事件触发一次失效解决方法
最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~ 于是想办法解决它~ 在网上找了一些资料,找到这几种方 ...
- SSH Secure File Transfer Client连接远程设备报“algorithm negotiation failed”错的解决方法
SSH Secure File Transfer Client连接远程设备报"algorithm negotiation failed"错的解决方法 ssh client 报 al ...
- INPUT[type=file]的change事件不触发问题
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...
- HTML中让表单input等文本框为只读不可编辑但可以获取value值的方法;让文本域前面的内容显示在左上角,居中
HTML中让表单input等文本框为只读不可编辑的方法 有时候,我们希望表单中的文本框是只读的,让用户不能修改其中的信息,如使input text的内容,中国两个字不可以修改 有时候,我们希望 ...
- 【小知识点】input输入框在安卓以及IOS手机中光标及字体不居中解决方法
问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. input { height: 1rem; padding: 1rem 0; ...
- Select下拉框onchange事件获取option的value值
首先方法中使用到了jqury,首先导入jqury的插件: 如果jqury的小插件没有的话,就去网上下载一个吧,jqury比原生的js使用起来方便了很多,这里也提供一个我的jqury的下载地址: jqu ...
- input框只允许输入正整数、正数(包含小数)的解决方法 vue.js实现
我来打自己脸了!!!!...刚刚发现在中文输入法下是无效的,有人能解决这个问题么 如果要求input只能输入数字怎么做? 设置type="number" ? 那我如果想限制长度,此 ...
- ASP.net绑定文本框Enter事件到按钮 ASP.NET执行后台执行JS方法
txtAccountBarcode.Attributes.Add("onkeydown", "if(event.which || event.keyCode){if (( ...
- 安卓input框获取焦点时,底部按钮会顶上去的解决方法
var h = document.body.scrollHeight;window.onresize = function(){ if (document.body.scrollHeight < ...
随机推荐
- 漫谈Nuclear Web组件化入门篇
目前来看,团队内部前端项目已全面实施组件化开发.组件化的好处太多,如:按需加载.可复用.易维护.可扩展.少挖坑.不改组件代码直接切成服务器端渲染(如Nuclear组件化可以做到,大家叫同构)... 怎 ...
- xampp与Hbuilder、phpstorm配置
1.xampp的安装就不用多说了,安装完按之后出现这个界面. 2.点击中间那个按钮,运行三个选项,全部正常之后是这样的,这样xampp就不用管了,但是要记下安装的路径,之后需要用 3.首先说Hbuil ...
- 让ABAP开发者愈加轻松的若干快捷键
引言 ABAP是一种和当代编程语言在许多方面有着相当不同的编程语言.ABAP的某些方面可能会让我们奇怪,为什么它会如此复杂?而它的某些方面又是那么杰出,给予了ABAP开发者们比其它任何语言更多的便利. ...
- 基于Cesium1.26地图API下的GeoServer2.9.0服务器跨域设置
遇到的问题: 最近基于Cesium来做3D模型的地图开发,在访问自己发布的WMS服务之后,遇到了GeoServer跨域问题. 调用这个WMS服务的时候,浏览器(我用Chrome)开发者工具报错: 控制 ...
- Scala For Java的一些参考
变量 String yourPast = "Good Java Programmer"; val yourPast : String = "Good Java ...
- H5 表格标签基本使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 版本控制-Git服务器搭建和常用命令使用
Git是目前世界上最先进的分布式版本控制系统(没有之一).使用Svn的请参考<版本控制-svn服务器搭建和常用命令(centos 6.3)>,下面介绍Git的常用命令 常用命令 简单版 升 ...
- sublime text 3 快捷键大全以及配置编译环境
Sublime text 3是码农最喜欢的代码编辑器,每天和代码打交道,必先利其器,掌握基本的代码编辑器的快捷键,能让你打码更有效率.刚开始可能有些生疏,只要花一两个星期坚持使用并熟悉这些常用的快捷键 ...
- java基础算法之插入排序
一.插入排序介绍 插入排序(Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通 ...
- S5PV210_流水灯
1.整体思路:把相应的配置数据写入相应的寄存器,控制GPIO电平(Led.s)——运用工程管理Makefile编译.链接文件(由Led.s编译得到led.bin,该文件用于USB启动方式点亮LED,若 ...