前段代碼:
// 這裏使用display:none將input標籤隱藏
<input type="file" name="file" id="file" onchange="fileUpload()" style="display:none">
<input type="button" onclick="select_file()" value="上傳">
點擊按鈕實現文件的上傳,使用到formData對象,可以理解爲HTML中的form表單的抽象; 使用創建一個formData對象,使用ajax進行異步提交數據;
js代碼:
# 點擊button按鈕觸發input標籤
function select_file(){
$("#file").trigger("click");
}
function fileUpload(){
# 創建formdata對象
var formData = new FormData();
# 給formData對象添加<input>標籤,注意與input標籤的ID一致
formData.append('file', $('#file')[0].files[0]);
$.ajax({
url : '/xxx',//這裏寫你的url
type : 'POST',
data : formData,
contentType: false,// 當有文件要上傳時,此項是必須的,否則後臺無法識別文件流的起始位置
processData: false,// 是否序列化data屬性,默認true(注意:false時type必須是post)
dataType: 'json',//這裏是返回類型,一般是json,text等
clearForm: true,//提交後是否清空表單數據
success: function(data) { //提交成功後自動執行的處理函數,參數data就是服務器返回的數據。
aler('上傳成功');
},
error: function(data, status, e) { //提交失敗自動執行的處理函數。
console.error(e);
}
});
}