最近帮朋友做个项目中遇到了type=file change事件只能执行一次的问题,度娘了一下,发现提供了各种解决方案,所以决定记录一下我的思考方向和最终解决方式。

    起初帮朋友做个项目,项目中遇到上传文件,没想太多,代码就敲了起来,尼玛,上传做好啦,兴冲冲,一测,ei,怎么回事,怎么不能上传了,程序员的各种抓狂捉急啊,开始度娘找解决方案,找来找去,冷静下来,自己想了解决方案;

    蛋疼的<input type='file' />设计,不管文件上传成功与否,已添加的文件已经被记录了,所以不会再执行change事件,大概原因知道了,动手做吧,如果我能清空记录,事件不就能触发了吗,尝试了一下,尼玛,没成功。继续找方法,如果我替换了<input type='file' />标签,然后重新绑定change事件会怎么,动手试了一下,成功了,下面贴上代码:

<form action="/api/Index/Browse" enctype="multipart/form-data" id="form_Upload" method="post">
  <input id="fileUpload" type="file" name="file" style="display:none">

</form>

$('input[id=fileUpload]').click();

var count = 0;
$('input[id=fileUpload]').unbind().change(function () {
$('#form_Upload').ajaxSubmit(options);

});

var options = {
success: function (data) {
//$scope.orderInfo = eval(data);
$scope.$apply(function () {
$scope.orderInfo = eval(data);

//start 为避免type=file控件的change()只能执行一次,更换控件,重新绑定事件
count++;
$("#fileUpload").replaceWith('<input type="file" id="fileUpload" name="file" style="display:none;" title="' + count + '"/>');
$('#fileUpload').on('change', function () {

$('#form_Upload').ajaxSubmit(options);
});
//end

$http.post(url, params).success(function (data) {
  do something
}, function () {
  do something

});
});
}
};

更多相关文章

  1. Asp.NET页面事件加载的顺序是什么样的
  2. c#如何在程序中定义和使用自定义事件
  3. 在XML布局里给View设置点击事件的案例分享
  4. Vue.js流程图插件 可自定义流程节点事件
  5. Node.js 事件循环完整指南[每日前端夜话0x9F]
  6. 分布式作业系统 Elastic-Job-Lite 源码分析 —— 作业事件追踪
  7. 如何正确使用Node.js事件[每日前端夜话0x4B]
  8. 现代浏览器探秘(part4):事件处理 [每日前端夜话(0x14)]
  9. 关于Python圈近几天争论事件的一些思考

随机推荐

  1. Android常用布局属性
  2. 我的Android进阶之旅------>Android 众多
  3. 浅析Android手机卫士读取联系人
  4. 转:打造一款 Android 联网 tic-tac-toe 游
  5. 关于android的id
  6. Android:常用属性整理
  7. Android画图之Bitmap(二)
  8. Android的UI结构试图工具hierarchyviewer
  9. Android Studio开发指南
  10. Android中animation方面知识: Android:int