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. JAVA第八周课堂笔记

  2. 一个台阶总共有n级，如果一次可以跳1级，也可以跳2级。求总共有 多少总跳法?

    首先我们考虑最简单的情况:如果只有1 级台阶,那显然只有一种跳法,如果有2 级台阶,那就有两种跳的方法了:一种是分两次跳,每次跳1 级:另外一种就是一次跳2 级.现在我们再来讨论一般情况:我们把n 级 ...

  3. (转)部署MongoDB时需要注意的调参

    部署MongoDB的生产服务器,给出如下相关建议: 使用虚拟化环境: 系统配置 1)推荐RAID配置 RAID(Redundant Array of Independent Disk,独立磁盘冗余阵列 ...

  4. DataBase -- Customers Who Never Order

    Question: Suppose that a website contains two tables, the Customers table and the Orders table. Writ ...

  5. 【转】C#获取当前路径7种方法

    webformvar s = System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName; //C盘 IIS路径 var s1 ...

  6. cf 442 D. Olya and Energy Drinks

    cf 442 D. Olya and Energy Drinks(bfs) 题意: 给一张\(n \times m(n <= 1000,m <= 1000)\)的地图 给出一个起点和终点, ...

  7. POJ3294 Life Forms 【后缀数组】

    生命形式 时间限制: 5000MS   内存限制: 65536K 提交总数: 16660   接受: 4910 描述 你可能想知道为什么大多数外星人的生命形式与人类相似,不同的是表面特征,如身高,肤色 ...

  8. 洛谷 P3084 [USACO13OPEN]照片Photo 解题报告

    [USACO13OPEN]照片Photo 题目描述 农夫约翰决定给站在一条线上的\(N(1 \le N \le 200,000)\)头奶牛制作一张全家福照片,\(N\)头奶牛编号\(1\)到\(N\) ...

  9. 安徽师大附中%你赛day4T2 演讲解题报告

    演讲 题目背景: 众所周知,\(\mathrm{Zdrcl}\)是一名天天\(\mathrm{AK}\)的高水平选手. 作为一民长者,为了向大家讲述自己\(\mathrm{AK}\)的经验,他决定在一 ...

  10. 【BZOJ 1082】[SCOI2005]栅栏 二分+dfs

    对于最优解我们发现所有的最优解都可以是前多少多少个,那么我们就二分这个前多少多少个,然后用dfs去判解,我们发现在dfs的过程中如果不剪枝几乎必T,所以我们就需要一些有效的剪枝 I. 我们在枚举过程中 ...