1. 程式人生 > >利用js/jq 利用FormData 物件和ajax上傳檔案

利用js/jq 利用FormData 物件和ajax上傳檔案

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
        )
)
**/