ASP.NET 使用 FormData 实现 AJAX 上传图片

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

关于 FormData

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

HTML部分

首先引入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;" />

jQuery 部分s

        $(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 中取出图片，并设置图片保存的路径，然后保存图片，最后输出图片保存的路径。

/// <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;
            }
        }
    }

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

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