利用js/jq 利用FormData 物件和ajax上傳檔案
阿新 • • 發佈:2018-12-26
new FormData(); 可以獲取某個表單,但是有時候感覺不太靈活。可以利用jq獲取指定input type=file 中的檔案,將其賦值給FormData 例項的某個屬性,做上傳。
HTML:
<div class="test" style="width: 200px;height: 200px; border: 1px solid">
<input id="image" type="file">
</div>
<button id="upload">上傳</button>
JS:
$("#upload").click(function () {
var file = $("#image")[0].files[0];
//列印file 為物件
console.log(file);
var formObj = new FormData();
formObj.set('image', file);
$.ajax({
url:'/test/upload',
data:formObj,
type: 'POST',
dataType:'json',
processData:false ,
contentType:false,
success:function (res) {
},
fail : function (res) {
}
});
});
對應的PHP方法中列印獲取的檔案資訊。
function testFile() {
print_r($_FILES);
}
/**
Array
(
[image] => Array
(
[name] => red.jpg
[type] => image/jpeg
[tmp_name] => /tmp/phpXFXMw5
[error] => 0
[size] => 23989
)
)
**/