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. symfony安装总结

    将D:\ApacheServer\php路径添加到环境变量path中,在cmd命令行中可以执行php命令 打开php.ini 打开extension=php_openssl.dll file_put_ ...

  2. 微信小程序开发中怎么设置转发（分享）的信息

    如果什么都不设置,转发时默认名称是小程序的名称,转发的图片显示的是当前页面的截图,如图一 如何在自定义转发信息呢? 在进行转发的页面中: Page({ onShareAppMessage: funct ...

  3. SRM710 div1 MagicNim（博弈论）

    题目大意: 给出n+1堆石子,前n堆石子的数量是a[i],最后一堆只有1个石子,但是具有魔力 拿走该石子的一方可以选择接下来是进行普通的Nim游戏还是anti-nim游戏 问是先手必胜还是必败 首先拿 ...

  4. 【题解】NOI2017游戏

    2-SAT.洛谷P3845 一开始以为——怎么有3个呢?后来发现因为每个地图都有一种车是不能用的,所以就等于每一个地图都有两个适应的车啦. 那么对于x类型的地图呢——只有8个,直接2^8暴力枚举每一种 ...

  5. 【莫比乌斯反演】51nod1594 Gcd and Phi

    题解 显然可以O(nlogn)计算 代码 //by 减维 #include<set> #include<map> #include<queue> #include& ...

  6. 部分经典IT书籍

    部分经典IT书籍 [系统,网路管理]1) Learning the Unix Operating System 1565923901 O'reilly/1997-4ed ***强力推荐给想入门unix ...

  7. POJ2236：Wireless Network（并查集）

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 39772   Accepted: 164 ...

  8. Ecplise下设置jQuery和ExtJs自动提示

    Spket 1.6.23下载: http://yunpan.cn/cjJYmEcMFIuuN  访问密码 5642 ext jsb下载:http://yunpan.cn/cjJYR7ZTzibQn  ...

  9. WebKit学习资源

    1.http://blog.csdn.net/dlmu2001/article/category/741748    红心地瓜 2.http://blog.csdn.net/cnnzp/article ...

  10. JavaScript 页面间传值

    转自:http://blog.csdn.net/qq380107165/article/details/7330612 一:JavaScript静态页面值传递之URL篇 能过URL进行传值,把要传递的 ...