JavaScript判断文件上传类型的方法


Posted in Javascript onSeptember 02, 2014

本文实例展示了JavaScript判断文件上传类型的方法,是一个非常常用的技巧。具体实现方法如下:

文件上传时用到一个功能,使用html元素的input标签实现:

<input id="imageFile" name="imageFile1" accept="image/jpg,image/jpeg,image/png,image/bmp,image/gif" type="file"   title="点击选择文件" onchange="imageSubmit(this,0);"/>

选中图片后立即触发onchange事件上传图片,但是重复选择相同的图片不会触发onchang事件,解决办法如下:

function imageSubmit(obj, imageType) { 
  if (imageType == "0") { 
  //相关处理代码... 

  //解决上传相同图片不触发onchange事件
  var nf = obj.cloneNode(true);
  nf.value=''; 
  obj.parentNode.replaceChild(nf, obj);
  }
}

cloneNode()方法用来创建调用这个节点的一个完全相同的副本,参数true表示执行深复制,也就是复制节点及整个子节点树,在参数为false的情况下,执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。因此,这个节点副本就成为了一个“孤儿”,除非通过appendChild()、insertBefore()或replaceChild()将它添加到文档中。

希望本文所述对大家运用javascript进行web程序设计有所帮助。

Javascript 相关文章推荐
如何在指定的地方插入html内容和文本内容
Dec 23 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
Jan 21 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
vue实现全选和反选功能
Aug 31 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
JavaScript中九种常用排序算法
Sep 02 #Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 #Javascript
解决jquery版本冲突的有效方法
Sep 02 #Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 #Javascript
引用其它js时如何同时处理多个window.onload事件
Sep 02 #Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 #Javascript
理解javascript中的回调函数(callback)
Sep 02 #Javascript
You might like
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
PHP 图片上传代码
2011/09/13 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
jQuery实现表头固定效果的实例代码
2013/05/24 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
nodejs mysql 实现分页的方法
2017/06/06 NodeJs
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
JS简单实现动态添加HTML标记的方法示例
2018/04/08 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python控制台显示时钟的示例
2014/02/24 Python
pymongo实现控制mongodb中数字字段做加法的方法
2015/03/26 Python
python制作企业邮箱的爆破脚本
2016/10/05 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python实现事件驱动
2018/11/21 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
《爱如茉莉》教后反思
2014/04/12 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
Python语言规范之Pylint的详细用法
2021/06/24 Python
关于 Python json中load和loads区别
2021/11/07 Python