ajax：html5上传文件，上传之前可以实现本地预览

本主题主要涉及两个新内容：

1、上传文件（主要使用了FormData）

2、本地预览（主要使用了FileReader）

html5的FormData其实就是平时的Form表单，只是html5可以直接新建这样一个对象，然后通过ajax提交

FormData对象有一个方法：append(Object name,Object value,[String blobName])

然后上传文件跟平时的流程一样了：

前台有<input type="file" id="upload" />

var el = document.getElementById("upload");
if (el.files.length <= 0) return;

var data = new FormData();
data.append("后台取得文件的key", el.files[0]);
$.ajax({
    url: "Handler1.ashx",
    type: "POST",
    data: data,
    processData: false, //不处理数据
    contentType: false //不修改MIME类型
})

后台就是直接用postfile接收就可以了

HttpPostedFile file = context.Request.Files["前台定义的key"];
string strSavePath = context.Server.MapPath("文件名");
file.SaveAs(strSavePath);

FileReader其实就是一个读取用户选择文件的base64数据的对象

 

var reader = new FileReader();
reader.onload = function () {
    $("<img src='" + this.result + "'/>").appendTo("body");
}
reader.readAsDataURL($("#UploadFile").get(0).files[0]); //读出文件的base64