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 相关文章推荐
[原创]提供复制本站内容时出现,该文章转自脚本之家等字样的js代码
Mar 27 Javascript
用javascript实现画板的代码
Sep 05 Javascript
JavaScript 学习点滴记录
Apr 24 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
多种方法实现JS动态添加事件
Nov 01 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
Vue之Watcher源码解析(1)
Jul 19 Javascript
浅谈Angular路由守卫
Aug 26 Javascript
微信小程序富文本渲染引擎的详解
Sep 30 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
vue实现标签云效果的方法详解
Aug 28 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
PHP通过curl获取接口URL的数据方法
2018/05/31 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
JS实现微信里判断页面是否被分享成功的方法
2017/06/06 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
vue 导航守卫和axios拦截器有哪些区别
2020/12/19 Vue.js
详解Python中用于计算指数的exp()方法
2015/05/14 Python
深入理解python中的atexit模块
2017/03/07 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
pytorch 实现查看网络中的参数
2020/01/06 Python
TensorFlow实现从txt文件读取数据
2020/02/05 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
python输出结果刷新及进度条的实现操作
2020/07/13 Python
CSS3制作彩色进度条样式的代码示例分享
2016/06/23 HTML / CSS
Foot Locker加拿大官网:美国知名运动产品零售商
2019/07/21 全球购物
美国购买体育、音乐会和剧院门票网站:SelectATicket
2019/09/08 全球购物
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
《小池塘》教学反思
2014/02/28 职场文书
五四演讲稿范文
2014/09/03 职场文书
学生违反校规检讨书
2014/10/28 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
导游词幽默开场白
2019/06/26 职场文书
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏