type=file的change事件只能执行一次的解决方案
最近帮朋友做个项目中遇到了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
});
});
}
};
type=file的change事件只能执行一次的解决方案的更多相关文章
- INPUT[type=file]的change事件不触发问题
在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...
- vue项目中解决type=”file“ change事件只执行一次的问题
问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...
- input type=”file“ change事件只执行一次的问题
js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...
- input type=file
(1)首先来说一下,如何让 <input type='file' >成为你想要的模样. 最简单的方法就是在让<input type='file' >的透明度为0(完全透明),然 ...
- file控件change事件触发问题
最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...
- input[type=file]上传图片及转为base64码以及预览
<input type="file" id="imgurl" capture="camera" accept="image/ ...
- 修改input type=file 标签默认样式的简单方法
<html><head><title></title></head><body><form id="upload ...
- 上传图片 ajax input type="file" 兼容 ie chroem 火狐
上传图片,转载请注明出处!!! 兼容 ie chroem 火狐 html: <div id="uploadForm"> <input id="file& ...
- 自定义input[type="file"]的样式
input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...
随机推荐
- Sublime text3!行首,行尾,批量编辑!
1.Windows下的操作操作步骤 1.Ctrl + H 2.打开正则,输入^,然后Find All,查找所有的行首 3.打开正则,输入$,然后Find All,查找所有的行尾 4.光标闪动,就可以进 ...
- “全栈2019”Java第十七章:赋值运算符和算术运算符
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- 【bzoj4887】:[Tjoi2017]可乐 矩阵乘法,快速幂
[bzoj4887]:[Tjoi2017]可乐 题目大意:一张无相连通图(n<=30),从1号点开始走,每秒可以走到相邻的点也可以自爆,求第t秒(t<=1e6)后所有的方案数是多少对201 ...
- flask实战-个人博客-使用类组织配置
使用类组织配置 在实际需求中,我们往往需要不同的配置组合.例如,开发用的配置,测试用的配置,生产环境用的配置.为了能方便地在这些配置中切换,你可以把配置文件升级为包,然后为这些使用场景分别创建不同的配 ...
- 记录:CentOS 7 安装配置分布式文件系统 FastDFS 5.1.1
CentOS 7 安装配置分布式文件系统 FastDFS 5.1.1 软件下载:http://download.csdn.net/download/qingchunwuxian1993/9897458 ...
- 博客主题皮肤探索-GitHub和jsdelivr的使用
有个前言 本萌并不会前端相关的知识,一切都是自己慢慢摸索出来的,如果存在代码方面的不足,请尽快告诉我~~~ 使用一个主题 目前我博客使用是 https://www.cnblogs.com/bndong ...
- 导出excel设置样式(Aspose.Cells)
Aspose.Cells.Style style = xlBook.Styles[xlBook.Styles.Add()];style1.Pattern = Aspose.Cells.Backgrou ...
- linux的yum报错
yum makecache Loaded plugins: fastestmirror Could not retrieve mirrorlist http://mirrorlist.centos.o ...
- Angular 例子
前提 angular-cli 是过时的 @angular/cli 用是主流 通讯录 Angular 从零到一 别人是在安装包的时候全程FQ,用蓝灯,每月700M的免费流量 nice fish A ...
- Java线程问题(基础回顾)
1.概念:线程是运行程序(进程)中单个顺序的小程序,一个进程可以由多个线程组成,而这多个线程共享同一个存储空间,这使得线程间的通信比较容易.在一个多进程的程序中,如果要切换到另一个进程,需要改变地址空 ...