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 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
基于jquery的Repeater实现代码
Jul 17 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 Javascript
详解Bootstrap的iCheck插件checkbox和radio
Aug 24 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
react实现换肤功能的示例代码
Aug 14 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
Feb 01 Javascript
Vue对象赋值视图不更新问题及解决方法
Jun 03 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
Angularjs中UI Router全攻略
2016/01/29 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
React props和state属性的具体使用方法
2018/04/12 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
Python SVM(支持向量机)实现方法完整示例
2018/06/19 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python中pip的安装与使用教程
2018/08/10 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
Django实现跨域的2种方法
2019/07/31 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
Python中免验证跳转到内容页的实例代码
2020/10/23 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
企业管理毕业生求职信范文
2014/03/07 职场文书
道德演讲稿
2014/05/21 职场文书
财务会计专业自荐书
2014/06/30 职场文书
公安纪律作风整顿剖析材料
2014/10/10 职场文书
Oracle中日期的使用方法实例
2022/07/07 Oracle