有時候我們需要在web端向服務器上傳文件,以前是使用form的方式進行提交,html5中支持直接使用xmlhttprequest上傳文件,send對象支持blob對象而文件就是一個blob對象
ajax上傳文件
ajax中可以通過參數processData這個參數來控制data是否進行轉換,我們將這個參數設置為false就可以使用ajax進行文件的上傳操作了
example:
$.ajax({
url: "your url",
type: "POST",
processData: false,
data: "your blob object",//blob對象
}).success(function () {
}).fail(function () {
}).always(function () {
})
將example中的url換成你自己的url,data換成通過input type=“file” 選中的文件 文件就發送成功了 這個時候服務器端收到的body中的比特流就是文件的內容
注意:使用ajax進行文件上傳的時候,由於文件的比特流充滿了整個body無法再進行參數的傳遞,此時只能通過請求的url或者是在http的head中傳遞參數了
通過head傳遞參數: 比如有兩個參數需要傳遞1.文件名稱name,2.文件后綴extension,請求的ajax方式:
$.ajax({
url: "your url",
type: "POST",
processData: false,
headers:{
name:"",
extension:""
}
data: "your blob object",//blob對象
}).success(function () {
}).fail(function () {
}).always(function () {
})
配合filereader對象還可以實現文件的分片上傳功能,使用localstore或其他的存儲技術還可以實現文件的端點續傳功能