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