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. (转)Loadrunner监控Linux的17个指标

    1.Average load:Average number of processes simultaneously in Ready state during the last minute.   上 ...

  2. JSON简介(2)

    例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. [bzoj3004] [SDOi2012]吊灯

    Description Alice家里有一盏很大的吊灯.所谓吊灯,就是由很多个灯泡组成.只有一个灯泡是挂在天花板上的,剩下的灯泡都是挂在其他的灯泡上的.也就是说,整个吊灯实际上类似于[b]一棵树[/b ...

  4. 【bzoj3224】Tyvj 1728 普通平衡树 01Trie姿势+平衡树的四种姿势 ：splay，旋转Treap，非旋转Treap，替罪羊树

    直接上代码 正所谓 人傻自带大常数 平衡树的几种姿势:  AVL Red&Black_Tree 码量爆炸,不常用:SBT 出于各种原因,不常用. 常用: Treap 旋转 基于旋转操作和随机数 ...

  5. Angular 监听路由变化

    var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...

  6. nodejs npm insttall 带不带-g这个参数的区别

    -g 中的g是global的意思所以带-g这个参数是全局安装,不带-g这个参数是本地安装. 在windows系统中全局安装的目录在:C:\Users\linsenq\AppData\Roaming\n ...

  7. bzoj 4836 [Lydsy1704月赛]二元运算 分治FFT+生成函数

    [Lydsy1704月赛]二元运算 Time Limit: 8 Sec  Memory Limit: 128 MBSubmit: 577  Solved: 201[Submit][Status][Di ...

  8. 接口认证方式：Bearer Token

    因为HTTP协议是开放的,可以任人调用.所以,如果接口不希望被随意调用,就需要做访问权限的控制,认证是好的用户,才允许调用API. 目前主流的访问权限控制/认证模式有以下几种: 1),Bearer T ...

  9. （转）Notepad++

    包括notepad++的详细的安装过程,插件使用说明,技巧…… crifan http://www.crifan.com/files/doc/docbook/rec_soft_npp/release/ ...

  10. iOS 全局变量设置的几种方式~

    在iOS开发过程中关于全局变量的几个方法 1. 在APPDelegate中声明并初始化全局变量.AppDelegate可以在整个应用程序中调用,在其他页面中可以使用代码段获取AppDelegate的全 ...