JS简单实现文件上传实例代码(无需插件)

 更新时间:2013年11月15日 09:23:16   作者:  
注意一下:在chrome浏览器下,为了数据安全,隐藏的input:file不能trigger “click” 事件。 所以要设置input:file的透明度达到隐藏的效果

复制代码 代码如下:

<span class="up-btn" id="selectFile">请选择文件</span>
<input type="file" name="fileupload" style="FILTER: alpha(opacity=0); moz-opacity: 0; opacity: 0;" />

// 点击#selectFile触发input:file的click事件
复制代码 代码如下:

jQuery('#selectFile').live('click',function(){
  var ie = !-[1,];
  if(ie){
   jQuery('input:file').trigger('click').trigger('change');
  }else{
   jQuery('input:file').trigger('click');
  }

 });

选中文件要触发的事件
复制代码 代码如下:

 jQuery('input:file').change(function(){
  //dosomthing
 }); 

注意事项:

1、在chrome浏览器下,为了数据安全,隐藏的input:file不能trigger “click” 事件。  所以要设置input:file的透明度达到隐藏的效果。

2、在ie6,7下input file文件不支持onchange事件,所以在此浏览器下我还是用<input type="file" value="" />

相关文章

  • 详谈JavaScript内存泄漏

    详谈JavaScript内存泄漏

    文章从什么是闭包、以及闭包所涉及的作用域链说起,讲述了JavaScript垃圾回收机制、循环引用、循环引用和闭包、IE中的内存泄漏以及解决方法,是篇非常详尽,非常不错的文章,这里推荐给大家。
    2014-11-11
  • javascript获取隐藏dom的宽高 具体实现

    javascript获取隐藏dom的宽高 具体实现

    一个隐藏的DOM是获取不到宽高的,如果想要获取,采用下面的方法:
    2013-07-07
  • javascript 动态样式添加的简单实现

    javascript 动态样式添加的简单实现

    下面小编就为大家带来一篇javascript 动态样式添加的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 原生JS实现的放大镜效果实例代码

    原生JS实现的放大镜效果实例代码

    放大镜大家在各大网站都能见到,下面小编给大家分享一段 ,代码是基于原生js实现的放大镜效果,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-10-10
  • 原生JS实现的跳一跳小游戏完整实例

    原生JS实现的跳一跳小游戏完整实例

    这篇文章主要介绍了原生JS实现的跳一跳小游戏,结合完整实例形式分析了javascript实现跳一跳游戏的原理、实现步骤与相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • 静态的动态续篇之来点XML

    静态的动态续篇之来点XML

    静态的动态续篇之来点XML...
    2006-08-08
  • js实现图片跟随鼠标移动效果

    js实现图片跟随鼠标移动效果

    这篇文章主要为大家详细介绍了js实现图片跟随鼠标移动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • js获取TreeView控件选中节点的Text和Value值的方法

    js获取TreeView控件选中节点的Text和Value值的方法

    在实际项目中,遇到一个问题,首先弹出一个新窗口,新窗口中放了一个TreeView控件,现在要解决的是,如何单击TreeView中一个节点,返回Text和Value到父页面并关闭该新窗口,本文将详细介绍此方法的实现
    2012-11-11
  • iframe的父子窗口之间的对象相互调用基本用法

    iframe的父子窗口之间的对象相互调用基本用法

    iframe在使用时可能会涉及到父子窗口之间传值和方法的相互调用,研究了一下其实非常简单,就那么几个用法而已,在此与大家分享下,感兴趣的朋友可以参考下
    2013-09-09
  • 浅谈JS对象添加getter与setter的5种方法

    浅谈JS对象添加getter与setter的5种方法

    这篇文章主要介绍了浅谈 JS 对象添加 getter与 setter 的5种方法以及如何让对象属性不可配置或枚举,需要的朋友可以参考下
    2018-06-06

最新评论