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. password & Encryption

    password & Encryption cipher https://dev.tencent.com/login

  2. [CF543D]Road Improvement

    题目大意:给定一个无根树,给每条边黑白染色,求出每个点为根时,其他点到根的路径上至多有一条黑边的染色方案数,模$1e9+7$. 题解:树形$DP$不难想到,记$f_u$为以$1$为根时,以$u$为根的 ...

  3. loj2540 「PKUWC 2018」随机算法

    pkusc 快到了--做点题涨涨 rp. 记 \(f(S,i)\) 表示 \(S\) 这个集合是决计不能选的(要么属于独立集,要么和独立集相连),或称已经考虑了的,\(i\) 表示此集合对应的最大独立 ...

  4. 在Eclipse上使用egit插件通过ssh协议方式上传项目代码的具体步骤

    在Eclipse上使用egit插件通过ssh协议方式上传项目代码 前戏: 使用ssh方式可以不通过https协议,避免直接提供账号密码的方式上传项目到git在线服务器,如Bitbucket.GitHu ...

  5. HDU 5665

    Lucky Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submi ...

  6. idea使用(一)

    基本上正式开发的常用工具基本都集成了,而且基本都在你非常容易触到的位置.说说我比较常用的: 1.ant 你懂的 2.maven你也懂的 3.SVN相比之下,IDEA的SVN的提交提供了更多的选项和功能 ...

  7. javascript中arguments的应用——不定项传参求和

    <script type="text/javascript"> window.onload=function(){ function sum(){ var result ...

  8. Spring表达式语言之SpEL

    •Spring 表达式语言(简称SpEL):是一个支持运行时查询和操作对象图的强大的表达式语言. •语法类似于 EL:SpEL 使用 #{…} 作为定界符,所有在大框号中的字符都将被认为是 SpEL ...

  9. HDU1232 畅通工程---(经典并查集应用)

    http://acm.hdu.edu.cn/showproblem.php?pid=1232 畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory ...

  10. 2017南宁现场赛E The Champion

    Bob is attending a chess competition. Now the competition is in the knockout phase. There are 2^r2r  ...