最近在做一个图片上传的功能,出现提交一次后,file输入框的change事件无法再次触发的bug,就是说提交一次后必须刷新才能再次提交,这就坑了~

于是想办法解决它~

在网上找了一些资料,找到这几种方法:

1、替换掉原来的input框
2、remove原来的input框,然后在添加进新的一样的input框

我测试了之后发现可以用下面的方法解决这个问题:
第一步:上传完成后替换掉原来的input框
第二步:重新绑定onchange事件

问题解决!!

代码如下:

 <script>
$(document).ready(function () {
/* jquery handleError版本兼容 */
jQuery.extend({
handleError: function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},
httpData: function (xhr, type, s) {
var ct = xhr.getResponseHeader("content-type"),
xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
data = xml ? xhr.responseXML : xhr.responseText;
if (xml && data.documentElement.tagName == "parsererror")
throw "parsererror";
if (s && s.dataFilter)
data = s.dataFilter(data, type);
if (typeof data === "string") {
if (type == "script")
jQuery.globalEval(data);
if (type == "json")
data = window["eval"]("(" + data + ")");
}
return data;
}
}); /* file输入框变化时调用上传图片函数 */
$(".myFile").change(function(){
var objId = $.trim($(this).attr('id'));
myUpload(objId);
});
/* 上传函数 */
function myUpload(objId)
{
var _obj = $('#'+objId);
var objVal = $.trim(_obj.val());
if(!objVal){
alert('你还未选择图片!');
return false;
}
$.ajaxFileUpload({
type: "post",
url: "upload.do",
secureuri:false,
fileElementId:objId,
dataType: "json",
success: function(result) {
if (result.code == "1") {
alert("上传文件成功!");
}
},
complete: function(xmlHttpRequest) {
_obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
$("#"+objId).on("change", function(){
myUpload(objId);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>

代码文本如下:

<script>
$(document).ready(function () {
/* jquery handleError版本兼容 */
jQuery.extend({
handleError: function (s, xhr, status, e) {
if (s.error) {
s.error.call(s.context || s, xhr, status, e);
}
if (s.global) {
(s.context ? jQuery(s.context) : jQuery.event).trigger("ajaxError", [xhr, s, e]);
}
},
httpData: function (xhr, type, s) {
var ct = xhr.getResponseHeader("content-type"),
xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,
data = xml ? xhr.responseXML : xhr.responseText;
if (xml && data.documentElement.tagName == "parsererror")
throw "parsererror";
if (s && s.dataFilter)
data = s.dataFilter(data, type);
if (typeof data === "string") {
if (type == "script")
jQuery.globalEval(data);
if (type == "json")
data = window["eval"]("(" + data + ")");
}
return data;
}
});

/* file输入框变化时调用上传图片函数 */
$(".myFile").change(function(){
var objId = $.trim($(this).attr('id'));
myUpload(objId);
});
/* 上传函数 */
function myUpload(objId)
{
var _obj = $('#'+objId);
var objVal = $.trim(_obj.val());
if(!objVal){
alert('你还未选择图片!');
return false;
}
$.ajaxFileUpload({
type: "post",
url: "upload.do",
secureuri:false,
fileElementId:objId,
dataType: "json",
success: function(result) {
if (result.code == "1") {
alert("上传文件成功!");
}
},
complete: function(xmlHttpRequest) {
_obj.replaceWith('<input type="file" class="myFile" id="'+objId+'" name="'+objId+'" style="display:none;"/>');
$("#"+objId).on("change", function(){
myUpload(objId);
});
},
error: function(data, status, e) {
alert("文件上传失败!");
}
});
return false;
}
});
</script>

done!

html input的file文件输入框onchange事件触发一次失效解决方法的更多相关文章

  1. 关于input的file框onchange事件触发一次失效的新的解决方法

    在google了众多方法后,网上有这么几种方法: 1.替换掉原来的input框 2.remove原来的input框,然后在添加进新的一样的input框 但是不知道为什么非常不幸的是,怎么弄我都弄不出. ...

  2. 问题-[Access]“无法打开工作组信息文件中的表 'MSysAccounts'”的问题的解决方法

    问题现象:ado.net oledb方式访问Access数据库文件时报错“无法打开工作组信息文件中的表 'MSysAccounts'”的问题的解决方法  问题处理:1.数据库名称不能命名为:Syste ...

  3. U盘删除文件时提示“文件或目录损坏且无法读取”的解决方法

    U盘删除文件时提示“文件或目录损坏且无法读取”的解决方法 出现原因:在写入或读取文件时,进行复制操作,此时复制到的文件是不完整的!或者移动硬盘/U盘中途被拔出,导致文件损坏 异常现象:被删文件(夹)属 ...

  4. input type='file'文件上传自定义样式

    使用场景: 在未使用UI库时免不了会用到各种上传文件,那么默认的上传文件样式无法达到项目的要求,因此重写(修改)上传文件样式是必然的,下面的效果是最近项目中自己写的一个效果,写出来做个记录方便以后使用 ...

  5. input type=file文件选择表单元素二三事

    一.原生input上传与表单form元素 如果想使用浏览器原生特性实现文件上传(如图片)效果,父级的form元素有个东西不能丢,就是: enctype="multipart/form-dat ...

  6. input type="file"文件上传到后台读取

    html页面(表单采用bootStrap) js部分: //更换头像时把上传的图片post方式到控制器 <script type="text/javascript"> ...

  7. HTML input type=file文件选择表单的汇总(一)

    HTML input type=file 在onchange上传文件的过程中,遇到同一个文件二次上传无效的问题. 最近在做项目过程中,遇到同一文件上传的时候,二次上传没有效果,找了资料,找到了原因: ...

  8. <input type="file">文件上传

    <input> type 类型为 file 时使得用户可以选择一个或多个元素以提交表单的方式上传到服务器上,或者通过 Javascript 的 File API 对文件进行操作 . 常用i ...

  9. javascript input type=file 文件上传

    在JS中,input type=file 是常用的文件上传API,但感觉W3C说的不是很清楚,同时网上的资料也比较乱. 由于做微信开发,所以网页打算尽量少用第三方库或者插件,以加快网页的加载速度.因为 ...

随机推荐

  1. 预加载 img 的方式。

    原生方式: var img = new Image(); img.onerror = function() { alert('img error'); }; img.onload = function ...

  2. MFC 对话框响应OnChar()

    最近在写程序时,出现了对话框里面不接收键盘消息的情况,特别搜索了以下内容 MFC中对话框是不会直接响应OnChar和OnKeyDown消息的,会被 其它控件拦截,测试时发现不会进入这两个函数,必须重定 ...

  3. Oracle并行执行特性应用初探

    1.      序 在历史数据转出测试过程中,通过不断的优化,包括SQL调整和数据库调整,从AWR中看到,基本上难以进行更多的性能提升,于是准备试试并行执行的特性,从这个任务的特点来分析,也比较适合采 ...

  4. 详解收发不畅原因及U-Mail邮件中继解决之道

    邮件在商务往来中扮演着信息交流的重要角色,假如传输受阻,必将造成沟通不畅:可能三五封邮件的投递你意识不到其重要性,但假如长期需和客户保持沟 通,则需要保证其一贯的稳定性,这就很考验相关软件平台的性能是 ...

  5. window.print() 去掉页眉页脚及打印链接【转载】

    页面中添加样式: <style media="print"> @page { size: auto; /* auto is the initial value */ m ...

  6. MFC窗口乱弹问题

    操作过程将子窗口放到主窗口的OnInitDialog函数和OnPaint函数中调用,在本机没有异常,放到其他机器上发现子窗口莫名其妙的被调用,跟踪发现主窗口这两个函数不止调用一次,中间会因为其他如按钮 ...

  7. 写css时要注意数字的浮动方向

    写css时要注意数字的浮动方向  当数字位数增加时他的方向才是正确的 text-align:right;padding-right:29px;

  8. 开源GIS软件初探

    谈到GIS软件,首先让我们想到的便是GIS界的龙头大哥ESRI公司旗下的ArcGIS产品,从最初接触的version 9.2到如今的version 10.1,其发展可谓风生水起.MapInfo软件也不 ...

  9. 数据库imp导表dmp的方法

    1>sqlplus / as sysdba 进入sqlplus 2>drop user USER cascade 3>create user USER IDENTIFIED BY P ...

  10. 有关STL 标准模板库

    1.vector  本质:对数组的封装  特点:读取能在常数时间内完成