云知笔记

C#加jquery ajax实现异步上传的方法

标签:

WEB应用的用户体验越来越不可忽视,上传文件的时候如果出现传统的页面跳转,很容易让用户厌恶,所以悄无声息异步上传并配合上传动态图片,已经变成了WEB应用中很流行的方法了,用户感受非常好,下面给大家分享一下异步上传的方法吧:
首先在你的上传页面中一定要引用这三个JS文件

1
2
3
<script type="text/javascript" src="../Scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.form.js"></script>
<script type="text/javascript" src="../Scripts/function.js"></script>

引用的目录要换成你自已的,其中function.js就是我们写的用ajax传递数据的代码,后面会给出具体代码现在再来看看上传页面中的如何加入C#的上传控件:

1
2
3
<a class="files">
<input id="FileUpload" name="FileUpload" type="file" /></a>
<span class="uploading">请稍候...</span>

把上面这段上传控件的代码放在你的页面中想要的位置上,其实SingleUpload()函数就是写在function.js中的,现在我们再来看看function.js文件中Ajax的用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//================上传文件JS函数开始,需和jquery.form.js一起使用===============
//单个文件上传

function SingleUpload(repath, uppath) {

var submitUrl="../upload.ashx?ReFilePath="+repath+"&amp;UpFilePath="+uppath;//upload.ashx是处理程序,因为在后台运行没有任何页面,所以就用ashx纯程序,用户是看不到这个处理程序的
//开始提交
$("#form1").ajaxSubmit({
beforeSubmit: function(formData, jqForm, options){
//隐藏上传按钮
$(".files").hide();
//显示LOADING图片
$(".uploading").show();
},
success: function(data, textStatus) {
if (data.msg == 1) {
$("#HiddenField1").val(data.msbox)
$("#phototd").children("img").remove()
$("#phototd").append("<img src="../&quot; + data.msbox + &quot;" width="100%" />");
} else {
alert(data.msbox);
}
$(".files").show();
$(".uploading").hide();
},
error: function(data, status, e) {
alert("上传失败,错误信息:" + e);
$(".files").show();
$(".uploading").hide();
},
url: submitUrl,
type: "post",
dataType: "json",
timeout: 600000
});
};

上传页面的内容就结束,现在我们来看看后台运行的处理程序,也就是纯C#代码,这些代码放在upload.ashx中:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
&lt;%@ WebHandler Language="C#" Class="upload" %&gt;

using System;
using System.Web;

public class upload : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{

string _refilepath = context.Request.QueryString["ReFilePath"]; //取得返回的对象名称
string _upfilepath = context.Request.QueryString["UpFilePath"]; //取得上传的对象名称

HttpPostedFile _upfile = context.Request.Files[_upfilepath];
string _delfile = context.Request.Params[_refilepath];

if (_upfile == null)
{
context.Response.Write("{msg: 0, msbox: "请选择要上传文件!"}");
return;
}

string msg = fileSaveAs(_upfile, "jpg|jpeg|gif|png",99999);
//删除已存在的旧文件(前台textbox传过来的文件名)
if (!string.IsNullOrEmpty(_delfile))
{
string _filename = System.Web.HttpContext.Current.Server.MapPath(_delfile);

}
//返回成功信息
context.Response.Write(msg);
}

///

/// 文件上传方法
///

//////允许上传的文件类型以|隔开,如"GIF|JPG|PNG|BMP|RAR|DOC|XLS|TXT" ///允许上传的文件大小 ///
public string fileSaveAs(HttpPostedFile _postedFile, string fileType, int fileSize)
{
try
{
fileSize = 500;
string _fileExt = _postedFile.FileName.Substring(_postedFile.FileName.LastIndexOf(".") + 1);
//验证合法的文件
if (!CheckFileExt(fileType, _fileExt))
{
return "{msg: 0, msbox: "不允许上传" + _fileExt + "类型的文件!"}";
}
if (fileSize &gt; 0 &amp;&amp; _postedFile.ContentLength &gt; fileSize * 1024)
{
return "{msg: 0, msbox: "文件超过限制的大小啦!"}";
}
string _fileName = DateTime.Now.ToString("yyyyMMddHHmmssff") + "." + _fileExt; //随机文件名

//按日期归类保存
string filePath = "Upload/" + DateTime.Now.ToString("yyyyMMdd") + "/";
//获得要保存的文件路径
string serverFileName = filePath + _fileName;
//物理完整路径
string toFileFullPath = HttpContext.Current.Server.MapPath(filePath);
//检查是否有该路径没有就创建
if (!System.IO.Directory.Exists(toFileFullPath))
{
System.IO.Directory.CreateDirectory(toFileFullPath);
}
//将要保存的完整文件名
string toFile = toFileFullPath + _fileName;
//保存文件
_postedFile.SaveAs(toFile);

return "{msg: 1, msbox: "" + serverFileName + ""}";
}
catch
{
return "{msg: 0, msbox: "上传过程中发生意外错误!"}";
}
}

///

/// 检查是否为合法的上传文件
///

///允许上传的文件后缀名 ///当前文件类型后缀名 ///
private bool CheckFileExt(string _fileType, string _fileExt)
{
string[] allowExt = _fileType.Split('|');
for (int i = 0; i &lt; allowExt.Length; i++)
{
if (allowExt[i].ToLower() == _fileExt.ToLower()) { return true; }
}
return false;
}

public bool IsReusable
{
get
{
return false;
}
}
}

上面的处理程序在后台悄无声息的处理完后,会返给ajax消息,用户在不刷新页面或不跳转页面的情况下就完成了上传和获取上传返回消息,实现了异步上传。