ajaxfileupload插件可以以异步方式上传文件（其实现：iframe），不像传统那样需要刷新，下面就介绍下其使用

1、HTML部分（先引入jquery）：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>无刷新单文件上传</title>

     <script src="jquery-2.2.4.min.js"></script>

     <script src="ajaxfileupload.js"></script>

 </head>

 <body>

     <p style="display:none"><input type="file" id="file1" name="file" /></p>

     <input type="button" value="上传" />

     <script type="text/javascript">

         $(function () {

             $(":button").click(function () {

                 $("#file1").click();

             })

         })

         $(document).on("change", "#file1", function () {

             $.ajaxFileUpload({

                 url: '/upload.ashx', //用于文件上传的服务器端请求地址

                 secureuri: false, //一般设置为false

                 fileElementId: 'file1', //文件上传空间的id属性  <input type="file" id="file" name="file" />

                 dataType: 'json', //返回值类型 一般设置为json

                 success: function (data, status)  //服务器成功响应处理函数

                 {

                     if (typeof (data.error) != 'undefined') {

                         if (data.error != '') {

                             alert(data.error);

                         } else {

                             alert(data.msg);

                         }

                     }

                 },

                 error: function (data, status, e)//服务器响应失败处理函数

                 {

                     alert(e);

                 }

             })

         });

     </script>

 </body>

 </html>

2、后台代码（使用的一般处理程序[ashx]）：

     public class upload : IHttpHandler

     {

         public void ProcessRequest(HttpContext context)

         {

             HttpFileCollection files = context.Request.Files;

             string msg = string.Empty;

             string error = string.Empty;

             string imgurl;

             if (files.Count > )

             {

                 files[].SaveAs(context.Server.MapPath("/") + System.IO.Path.GetFileName(files[].FileName));

                 msg = " 成功! 文件大小为:" + files[].ContentLength;

                 imgurl = "/" + files[].FileName;

                 string res = "{ error:'" + error + "', msg:'" + msg + "',imgurl:'" + imgurl + "'}";

                 context.Response.Write(res);

                 context.Response.End();

             }

         }

         public bool IsReusable

         {

             get

             {

                 return false;

             }

         }

     }

注意：IE低版本可能会不兼容（上传文件框被隐藏，而是通过点击按钮去模拟触发文件框点击事件）

参考：http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

ajaxfileupload异步上传文件的更多相关文章

  1. 【转】JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  2. JQuery插件ajaxFileUpload 异步上传文件（PHP版）

    太久没写博客了,真的是太忙了.善于总结,进步才会更快啊.不多说,直接进入主题. 前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错 ...

  3. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

  4. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  5. JQuery插件ajaxFileUpload 异步上传文件

    一.先对ajaxFileUpload插件的语法参数进行讲解 原理:ajaxfileupload是通过监听iframe的onload方法来实现, 当从服务端处理完成后,就触发iframe的onload事 ...

  6. 利用ajaxfileupload.js异步上传文件

    1.引入ajaxfileupload.js 2.html代码 <input type="file" id="enclosure" name="e ...

  7. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  8. jQuery插件之ajaxFileUpload异步上传

    介绍 AjaxFileUpload.js 是一个异步上传文件的jQuery插件,原理是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 下载地址: http://files.cnblogs. ...

  9. Servlet异步上传文件

    这里需要用到插件ajaxfileupload.js,jar包:commons-fileupload-1.3.2.jar,commons-io-2.5.jar 注意红色部分的字!!!! 1.创建一个we ...

随机推荐

  1. Flink on yarn的问题：Invalid AMRMToken

    目前采用的Flink的版本是1.4.2,运行在yarn上,总是时不时的报错“Invalid AMRMToken from appattempt”,导致AM挂掉. 简而言之,就是AM和RM沟通的过程中, ...

  2. 安装elasticsearch-1.7.1及中文IK和近义词配置

    安装elasticsearch及中文IK和近义词配置 https://www.cnblogs.com/yjf512/p/4789239.html 安装elasticsearch及中文IK和近义词配置 ...

  3. 大并发量订单处理的 KafKa部署

    大并发量订单处理的 KafKa部署总结 今天要介绍的是消息中间件KafKa,应该说是一个很牛的中间件吧,背靠Apache 与很多有名的中间件搭配起来用效果更好哦 ,为什么不用RabbitMQ,因为公司 ...

  4. 【bzoj5060】魔方国 乱搞+特判

    题目描述 一张未知的有重边无自环的图,只知道点数为n,边数为m.可以标记若干个点,如果一个点被标记,那么与它距离不超过k的点(包括本身)都会被覆盖. 显然对于每张不同图,让所有点被覆盖的最小代价是不一 ...

  5. perl的Sys::Syslog模块(openlog,syslog,closelog函数,setlogsock)-自定义日志

    perl的Sys::Syslog模块(openlog,syslog,closelog函数,setlogsock)-自定义日志 http://blog.chinaunix.net/xmlrpc.php? ...

  6. [CF1019A]Elections

    题目大意:有$n$个人,$m$个政党,每个人都想投一个政党,但可以用一定的钱让他选你想让他选的政党. 现在要$1$号政党获胜,获胜的条件是:票数严格大于其他所有政党.求最小代价 题解:暴力枚举其他政党 ...

  7. [AT2558]Many Moves

    题目大意:有$n$个位置$1,2,\dots n$:你有两个棋子$A$和$B$,你要进行$q$次操作,第$i$次操作给定一个$x_i$,你要选择一个棋子移动到$x_i$:求两个棋子最小移动的步数之和. ...

  8. BZOJ5323 [Jxoi2018]游戏 【数论/数学】

    题目链接 BZOJ5323 题解 有一些数是不能被别的数筛掉的 这些数出现最晚的位置就是该排列的\(t(p)\) 所以我们只需找出所有这些数,线性筛一下即可,设有\(m\)个 然后枚举最后的位置 \[ ...

  9. [hdu 3949]线性基+高斯消元

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3949 一开始给做出来的线性基wa了很久,最后加了一步高斯消元就过了. 之所以可以这样做,证明如下. 首 ...

  10. Codeforces Round #520 (Div. 2) B. Math

    B. Math time limit per test:1 second memory limit per test:256 megabytes Description: JATC's math te ...