JS简单实现文件上传实例代码（无需插件）

复制代码 代码如下:
<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="" />

您可能感兴趣的文章:

• 原生JS实现前端本地文件上传
• JS实现可视化文件上传
• js实现文件上传功能 后台使用MultipartFile
• JS+Struts2多文件上传实例详解
• vue.js 图片上传并预览及图片更换功能的实现代码
• php+croppic.js实现剪切上传图片功能
• JavaScript使用享元模式实现文件上传优化操作示例
• JS实现图片上传多次上传同一张不生效的处理方法
• js实现图片上传并预览功能
• vue.js图片转Base64上传图片并预览的实现方法
• Angularjs实现多图片上传预览功能
• JavaScript实现异步图像上传功能
• SpringBoot+Vue.js实现前后端分离的文件上传功能
• node.js自动上传ftp的脚本分享
• JS实现的文件拖拽上传功能示例
• Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
• JS和Canvas实现图片的预览压缩和上传功能
• JavaScript代码实现txt文件的上传预览功能
• js 实现 input type="file" 文件上传示例代码
• js实现上传图片预览的方法
• Servlet+Jsp实现图片或文件的上传功能具体思路及代码
• 上传图片预览JS脚本 Input file图片预览的实现示例
• JS实现上传图片的三种方法并实现预览图片功能
• js实现图片上传并正常显示
• 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
• JS中使用FormData上传文件、图片的方法
• 客户端js判断文件类型和文件大小即限制上传大小
• js获取上传文件的绝对路径实现方法
• 原生JS和jQuery版实现文件上传功能
• 微信JSSDK上传图片
• 简单实现js上传文件功能
• JS文件上传神器bootstrap fileinput详解
• js实现上传图片之上传前预览图片
• Javascript图片上传前的本地预览实例
• 学习使用AngularJS文件上传控件
• 分享5个好用的javascript文件上传插件