HTML input type=file 在onchange上传文件的过程中,遇到同一个文件二次上传无效的问题。

最近在做项目过程中,遇到同一文件上传的时候,二次上传没有效果,找了资料,找到了原因:

现解释如下:

input[type=file]使用的是onchange去做,onchange监听的为input的value值,只有再内容发生改变的时候去触发,而value在上传文件的时候保存的是文件的内容,你只需要在上传成功的回调里面,将当前input的value值置空即可:

   event.target.value='';

使用第二种方法:

有些IE浏览器貌似不行,好像使用file.outerHTML = file.outerHTML,我自己没测试。不过我觉得比较麻烦,还要判断浏览器什么的。像Ajax单图上传也可以直接form.reset()就可以了。

HTML input type=file文件选择表单的汇总(一)的更多相关文章

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

    1. 原生file input大小.按钮文字等UI自定义 元素input的原生样式,不是太好看: 有一种方法是这样的:让file类型的元素透明度0,覆盖在我们好看的按钮上.然后我们去点击好看的按钮,实 ...

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

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

  3. type=file 文件修改表单 名称不能正常回显的问题

     easyui 框架下   代码如下: css: .file_box{ float: right; width: 1035px; border: 1px solid #999; height: 32p ...

  4. C# 模拟提交带附件(input type=file)的表单

    今天调用某API时,对于文档中的传入参数:File[] 类型,感觉很陌生,无从下手! 按通常的方式在json参数中加入file的二进制数据提交,一直报错(参数错误)!后来经过多方咨询,是要换一种 表单 ...

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

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

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

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

  7. js 实现 input type="file" 文件上传示例代码

    在开发中,文件上传必不可少但是它长得又丑.浏览的字样不能换,一般会让其隐藏点其他的标签(图片等)来时实现选择文件上传功能 在开发中,文件上传必不可少,<input type="file ...

  8. [置顶] js 实现 <input type="file" /> 文件上传

    在开发中,文件上传必不可少,<input type="file" /> 是常用的上传标签,但是它长得又丑.浏览的字样不能换,我们一般会用让,<input type ...

  9. javascript input type=file 文件上传

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

随机推荐

  1. OpenCASCADE 平面与球面求交

    OpenCASCADE 平面与球面求交 eryar@163.com OpenCASCADE提供了类IntAna_QuadQuadGeo用来计算两个二次曲面quadric(球面.圆柱面.圆锥面及平面,平 ...

  2. PAT甲级——A1073 Scientific Notation

    Scientific notation is the way that scientists easily handle very large numbers or very small number ...

  3. 左神算法进阶班5_4设计可以变更的缓存结构(LRU)

    [题目] 设计一种缓存结构,该结构在构造时确定大小,假设大小为K,并有两个功能: set(key, value):将记录(key, value)插入该结构. get(key):返回key对应的valu ...

  4. 16_k近邻算法总结

    1.k近邻算法属于分类算法 2.你的“邻居”来推断出你的类别 3.标准定义:如果一个样本在特征空间中的k个最相似(即特征空间中最邻近)的样本中的大多数属于某一个类别,则该样本也属于这个类别. 4.计算 ...

  5. Mount- Linux必学的60个命令

    1.作用 mount命令的作用是加载文件系统,它的用权限是超级用户或/etc/fstab中允许的使用者. 2.格式 mount -a [-fv] [-t vfstype] [-n] [-rw] [-F ...

  6. Spring Http Basic(基本)和Digest(摘要)验证

    Basic(基本)和Digest(摘要)验证都是web应用中很受欢迎的可选机制. Basic验证一般用来处理无状态的客户端,它们在每次请求都附带它们的证书. 很常见的用法是把它和基于表单的验证一起使用 ...

  7. Spring整合JUnit单元测试

    必须先有JUnit的环境(已经导入了Junit4的开发环境) 1.导入jar包 2.在测试类上添加注解 @RunWith(SpringJUnit4ClassRunner.class) @Context ...

  8. 从github下载项目出现yes/no的选项,无法下载项目

    解决办法: # 本地执行: ssh-keygen # 将id_rsa_pub文件中公钥拷贝到github上的ssh认证 oodful@:~/Volumes/Term2 :::$cat ~/.ssh/i ...

  9. create-react-app 创建项目失败

    创建失败后查阅相关资料,亲测删除 C:\Users\Administrator\AppData\Roaming\npm-cache\ 该文件夹下所有内容后成功.

  10. ionic Hide tabs 实现

    1.指令代码 directiveMod.directive('hideTabs',function($rootScope){ return { restrict:'AE', link:function ...