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 同时提交多个Web表单的方法
Feb 19 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
基于jquery的滑动样例代码
Nov 20 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
JS验证字符串功能
Feb 22 Javascript
JavaScript的Object.defineProperty详解
Jul 09 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
JavaScript原型对象原理与应用分析
Dec 27 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
php设计模式之观察者模式的应用详解
2013/05/21 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
List the Stored Procedures in a SQL Server database
2007/06/20 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
一个js的tab切换效果代码[代码分离]
2010/04/11 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
在 Node.js 中使用原生 ES 模块方法解析
2017/09/19 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
JS实现验证码倒计时的注册页面
2018/01/02 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
利用python程序帮大家清理windows垃圾
2017/01/15 Python
python实现发送邮件功能代码
2017/12/14 Python
python使用mysql的两种使用方式
2018/03/07 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python实现ftp文件传输功能
2020/03/20 Python
Monnier Frères美国官网:法国知名奢侈品网站
2016/11/22 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
几道PHP面试题
2013/04/14 面试题
两只小狮子教学反思
2014/02/05 职场文书
企业出纳岗位职责
2014/03/12 职场文书
应届生自荐信
2014/06/30 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
2015年仓库工作总结
2015/04/09 职场文书
详解Redis实现限流的三种方式
2021/04/27 Redis
vue实现拖拽交换位置
2022/04/07 Vue.js