图片上传在 Web 开发中应用十分广泛，我们平时发朋友圈、发微博都用到了上传图片。正好在项目中用到了 AJAX 上传图片，就顺便更新下博客。
FormData 是为序列化表以及创建与表单相同的数据(用于 XHR 传输)提供便利。FormData 翻译过来就是表单数据，说白了就是方便我们用它来进行 AJAX 操作，想要继续了解的朋友可以百度一下。
首先引入jQuery类库，然后在页面上放置一个文件框用于选择图片、一个上传按钮用来提交数据，img 标签用来显示上传成功后的图片。
<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;" />
$(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 很方便快捷的完成了前端交互操作，代码一目了然，也比较简单，关键的地方都做了注释。
FileUploadHandler.ashx 需要通过 Request.Files.Count 来判断是否上传了图片，如果上传了，就从 Request.Files 中取出图片，并设置图片保存的路径，然后保存图片，最后输出图片保存的路径。
/// <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;
}
}
}
虽然文章标题只说了上传图片，但是上传文件也是可以的，具体就要看你怎么应用了。假期就剩两个星期了，项目一半都还没完成，心塞。
这是一篇过去很久的文章，其中的信息可能已经有所发展或是发生改变。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。