最近帮朋友做个项目中遇到了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事件只能执行一次的解决方案的更多相关文章

  1. INPUT[type=file]的change事件不触发问题

    在网页上要操作文件通常会使用INPUT[type=file]控件,但这个控件的设计很蛋疼.它不像其它编程语言中文件选择后会触发一个事件,只是让上面的文字改变,而这个改变可能会触发change事件而已. ...

  2. vue项目中解决type=”file“ change事件只执行一次的问题

    问题描述 在最近的项目开发中遇到了这样的一个问题,当我上传了一个文件时,我将获取到的文件名清空后,却无法再次上传相同的文件 <template> <div class="h ...

  3. input type=”file“ change事件只执行一次的问题

    js解决办法 HTML:<input id="file",type="file" onchange="upload()" /> ...

  4. input type=file

    (1)首先来说一下,如何让 <input type='file' >成为你想要的模样. 最简单的方法就是在让<input type='file' >的透明度为0(完全透明),然 ...

  5. file控件change事件触发问题

    最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...

  6. input[type=file]上传图片及转为base64码以及预览

    <input type="file" id="imgurl" capture="camera" accept="image/ ...

  7. 修改input type=file 标签默认样式的简单方法

    <html><head><title></title></head><body><form id="upload ...

  8. 上传图片 ajax input type="file" 兼容 ie chroem 火狐

    上传图片,转载请注明出处!!! 兼容 ie chroem 火狐 html: <div id="uploadForm"> <input id="file& ...

  9. 自定义input[type="file"]的样式

    input[type="file"]的样式在各个浏览器中的表现不尽相同: 1. chrome: 2. firefox: 3. opera: 4. ie: 5. edge: 另外,当 ...

随机推荐

  1. 在linux 创建网络会话和绑定两块网卡

    1. 如果我们在公司网络中要手动指定网络的IP地址,当我们回到家里则是使用DHCP(动态主机配置协议)自动分配IP地址.这就有点麻烦了,因为要频繁的修改IP地址,所以接下来我们来创建网络会话----- ...

  2. docker运行nginx

    docker run --name nginx(容器名) -p 80:80 -v 项目文件路径:/usr/share/nginx/html -v 配置文件路径:/etc/nginx/nginx.con ...

  3. 【sonar-block】Use try-with-resources or close this "BufferedInputStream" in a "finally" clause.

    自己的理解: try-with-resources是JDK7的新语法结构,主要功能是自动关闭资源而不需要在finally里面手动close()关闭, 而且最重要的是,try块中的异常不会被close( ...

  4. django中@property装饰器的运用

    python提供的内置装饰器——staticmethod.classmethod和property 在OSQA中,@property的使用频率是非常高的.下面就是它的使用方法: @property 可 ...

  5. python2-url编解码

    #coding:utf-8import urllibs={"username":"hhh","password":"XXXX&qu ...

  6. 2016级算法第三次上机-A.Bamboo的小吃街

    A Bamboo的小吃街 分析 经典的两条流水线问题,题目描述基本类似于课件中的流水线调度,符合动态规划最优子结构性质 关键的动态规划式子为: dp[0][j] = min(dp[0][j - 1], ...

  7. 分享自建的 Jrebel License Server 激活 Jrebel

    使用在线验证服务器激活 Jrebel 与 Idea 说明 代码来自于开源项目: gsls200808 / JrebelLicenseServerforJava 自建的服务地址 http://jrebe ...

  8. 达人篇:5)公差的正态分布与CPK与制程能力(重要)

    本章目的:明确公差分布(Tolerance Distribution)也有自己的形状,了解CPK概念. 1.正态分布(常态分布)normal distribution的概念 统计分析常基于这样的假设: ...

  9. rest-framework框架组件

    序列化组件 创建一个序列化类, 视图四种方式 以下代码都需要创建一个serializers.py文件 from rest_framework import serializers from CBV_a ...

  10. java实现图片文字识别的两种方法

    一.使用tesseract-ocr 1.    https://github.com/tesseract-ocr/tesseract/wiki上下载安装包安装和简体中文训练文件 window64位安装 ...