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="" />

赞 (0)

相关推荐

  • JS基于FileSaver.js插件实现文件保存功能示例 原创

    本文实例讲述了JS基于FileSaver.js插件实现文件保存功能.分享给大家供大家参考,具体如下: 这里介绍一款js插件用法非常简单,先来看看FileSaver.js插件源码: 复制代码 代码如下: /*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */ var saveAs=saveAs||function(e){"use strict";if(typeof naviga

  • 用js实现下载远程文件并保存在本地的脚本

    //use: cscript this.js http://www.xxx.com/xxx.exe c:\xxx.exe var objArgs = WScript.Arguments; var sGet=new ActiveXObject("ADODB.Stream"); var xGet = false; try { xGet = new XMLHttpRequest(); }  catch (trymicrosoft) { try {     xGet = new ActiveX

  • 基于WebUploader的文件上传js插件

    首先把地址甩出来,http://fex-team.github.io/webuploader/ 里面有比较完整的demo案例文档,本文主要是基于文件上传和图片上传增加了大量的注释,基本保证了每行代码都有注释以助于理解,是对官网demo的增强版,希望可以帮助大家更好的理解该插件 首先是文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uplo

  • 一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子

    jQuery插件AjaxFileUpload可以实现ajax文件上传,该插件使用非常简单,首先了解一下正确使用AjaxFileUpload插件的方法,然后再了解一些常见的错误信息和解决方法. 使用说明 需要使用jQuery库文件 和AjaxFileUpload库文件 使用实例 一,包含文件部分 复制代码 代码如下: <script type="text/javascript" src="jquery.js"></script> <scr

  • JSP实现远程文件下载保存到服务器指定目录中的方法

    本文实例讲述了JSP实现远程文件下载保存到服务器指定目录中的方法.分享给大家供大家参考,具体如下: <%@page import="java.net.*,java.io.*"%> <%! public boolean saveUrlAs(String photoUrl, String fileName) { //此方法只能用户HTTP协议 try { URL url = new URL(photoUrl); HttpURLConnection connection =

  • javascript实现将文件保存到本地方法汇总

    下面是保存一个图片为示例,代码来源于网络,希望能够给大家带来一定的帮助,代码如下: <script type="text/javascript"> function saveFile(imgUrl) { var oPop=window.open(imgUrl,"","width=1, height=1, top=5000, left=5000"); for(;oPop.document.readyState != "comp

  • JavaScript+Java实现HTML页面转为PDF文件保存的方法

    需求是一个导出pdf的功能,多方奔走终于实现了,走了不少弯路,而且怀疑现在这个方法仍是弯的. 有个jsPDF 插件可以在前端直接生成pdf,很简便,但不支持IE. 前端: 首先引入  html2canvas.js html2canvas(document.body, { //截图对象 //此处可配置详细参数 onrendered: function(canvas) { //渲染完成回调canvas canvas.id = "mycanvas"; // 生成base64图片数据 var

  • ajaxFileUpload.js插件支持多文件上传的方法

    前提条件: ajaxFileUpload.js插件多文件上传 步骤: 1.修改源码,(源码只支持单个文件的上传): 复制代码 代码如下: //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement).clone(); //jQuery(oldElement).attr('id', fileId); //jQuery(oldElement).before(ne

  • javascript 保存文件到本地实现方法

    2种形式都可以 第一种: 复制代码 代码如下: <script> function SaveAs5(imgURL) { var oPop = window.open(imgURL,"","width=1, height=1, top=5000, left=5000"); for(; oPop.document.readyState != "complete"; ) { if (oPop.document.readyState == &

  • JavaScript中读取和保存文件实例

    话说今天只是粗略浏览了一下Proxy SwitchySharp的源码,就收获了不少东西,其中就包括本文要介绍的读取和保存文件. 因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了.而出于安全原因,只有IE才提供访问文件的API:但随着HTML 5的到来,其他浏览器也纷纷支持了. 首先说读取文件.W3C提供了一些File API,其中最重要的是FileReader这个类. 先列出需要用到的HTML标签: 复制代码 代码如下: <input type="fi

  • js插件方式打开pdf文件(浏览器pdf插件分享)

    js插件方式打开pdf文件(浏览器pdf插件分享)

    两种方案:一种直接链接,把pdf文件当作img文件,类似<a href=""/>这种形式,这样链接: 复制代码 代码如下: <frame src="pdf文件的地址"></frame> 另一种:使用js插件哈.其中实现阅读pdf文件的js插件很多,比如:pdf.js:是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持:jsPDF:是一个使用Javascript语言生成PDF的开源库(IE暂不支持)

随机推荐