图片上传在 Web 开发中应用十分广泛,我们平时发朋友圈、发微博都用到了上传图片。正好在项目中用到了 AJAX 上传图片,就顺便更新下博客。
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(); data.append(files[0].name, files[0]); $.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; } } }
|
虽然文章标题只说了上传图片,但是上传文件也是可以的,具体就要看你怎么应用了。假期就剩两个星期了,项目一半都还没完成,心塞。
这是一篇过去很久的文章,其中的信息可能已经有所发展或是发生改变。