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的全 ...