图片上传在 Web 开发中应用十分广泛,我们平时发朋友圈、发微博都用到了上传图片。正好在项目中用到了 AJAX 上传图片,就顺便更新下博客。

关于 FormData

FormData 是为序列化表以及创建与表单相同的数据(用于 XHR 传输)提供便利。FormData 翻译过来就是表单数据,说白了就是方便我们用它来进行 AJAX 操作,想要继续了解的朋友可以百度一下。

HTML部分

首先引入jQuery类库,然后在页面上放置一个文件框用于选择图片、一个上传按钮用来提交数据,img 标签用来显示上传成功后的图片。

1
2
3
4
5
<form action="/" method="post">
<input type="file" name="fileUpload" value="" />
<input type="button" name="btnUpload" value="上传" />
</form>
<img id=”showImg” src="#" alt="" style="display:none;" />

jQuery 部分s

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(function () {
$("input[name='btnUpload']").click(function () {
var fileUpload = $("input[name='fileUpload']").get(0);
var files = fileUpload.files; // 上传的图片
var data = new FormData(); // 实例化一个FormData
data.append(files[0].name, files[0]); // 将上传的图片数据添加到FormData里面
$.ajax({
url: "FileUploadHandler.ashx", // 后台接收图片数据文件
type: "POST",
data: data,
contentType: false,
processData: false,
success: function (result) {
$("#showImg").prop("src", result).show();
},
error: function (err) {
alert(err);
}
});
});
});

上面的 jQuery 很方便快捷的完成了前端交互操作,代码一目了然,也比较简单,关键的地方都做了注释。

ASP.NET 后台

FileUploadHandler.ashx 需要通过 Request.Files.Count 来判断是否上传了图片,如果上传了,就从 Request.Files 中取出图片,并设置图片保存的路径,然后保存图片,最后输出图片保存的路径。

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
/// <summary>
/// FileUploadHandler 的摘要说明
/// </summary>
public class FileUploadHandler : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
//验证是否有提交了图片
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
string fname = context.Server.MapPath("~/uploads/" + files[0].FileName); //设置图片保存路径
files[0].SaveAs(fname); // 保存图片
context.Response.ContentType = "text/plain"; // 设置响应内容的类型
context.Response.Write("./uploads/" + files[0].FileName); // 输出文件保存地址
}
}

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

虽然文章标题只说了上传图片,但是上传文件也是可以的,具体就要看你怎么应用了。假期就剩两个星期了,项目一半都还没完成,心塞。

这是一篇过去很久的文章,其中的信息可能已经有所发展或是发生改变。