ajax使用FormData物件上傳檔案-教學撰寫:徐嘉裕Neil hsu

如果是php表單要上傳物件只需要在form裡面加上enctype="multipart/form-data然後使用input type="file"就能吧檔案陣列中的五個屬性值一起上傳透過$_FILES["file"]來接收變數，然後使用php的製作圖檔或是檔案上傳程式來做後續處理，但如果是ajax表單是沒有form可以使用的，必須透過js取值然後用ajax來處理，好朋友一定認為這樣就能取到type="file"的值了。

var $upfile= $('input[name=file]').val();

抱歉這樣只能抓到檔案路徑，檔案屬性是抓不到的，所以即使變數送出去也無法建立檔案，用js要抓取檔案屬性的方法必須使用FormData物件才行，請看以下說明：

//html結構

<input class="form-control" id="blockimg" type="file" >
<button id="upload">Upload</button>

//$.ajax

 $('#upload').on('click', function() {

    var file_data = $('#blockimg').prop('files')[0];   //取得上傳檔案屬性

    var form_data = new FormData();  //建構new FormData()

    form_data.append('file', file_data);  //吧物件加到file後面

                              

    $.ajax({

                url: 'upload.php',

                cache: false,

                contentType: false,

                processData: false,

                data: form_data,     //data只能指定單一物件                 

                type: 'post',

               success: function(data){

                    $('#ajsxboxdhow').html(data);

                }

     });

});

這樣在AJAX POST過去的upload.php檔案中就能以$_FILES["file"]來接收檔案屬型，包含以下五個陣列內容["name"]["type"]["tmp_name"]["error"]["size"],之後可以使用像是class.upload.php檔案處理程式接收$_FILES["file"]後進行後續工作。

不過這又衍生出一個問題，$.ajax的data:只能指定form_data，那如果有其他的變數也要一起送進去upload.php中該怎麼處理，像是id，或是資料夾id及驗證參數，這部分可以同樣使用append()來解決問題，方法如下：

 $('#upload').on('click', function() {

    var file_data = $('#blockimg').prop('files')[0];   //取得上傳檔案屬性

    var form_data = new FormData();  //建構new FormData()

    form_data.append('file', file_data);  //吧物件加到file後面

//另外要傳送的變數

form_data.append('var1', $var1);
form_data.append('var2', $var2);
form_data.append('var3', $var3);

                              

    $.ajax({

                url: 'upload.php',

                cache: false,

                contentType: false,

                processData: false,

                data: form_data,     //data只能指定單一物件                 

                type: 'post',

               success: function(data){

                    $('#ajsxboxdhow').html(data);

                }

     });

});

也就是吧需要傳送的變數使用append全部加到file後面，再包在form_data送進去upload.php即可!

//upload.php

//接收變數

$var1=(empty($_REQUEST['var1']))?"":$_REQUEST['var1']; 

$var2=(empty($_REQUEST['var2']))?"":$_REQUEST['var2']; 

$var3=(empty($_REQUEST['var3']))?"":$_REQUEST['var3']; 

//接收檔案屬性值

$file=(empty($_FILES['file']))?"":$_FILES['file']; 

這就就沒問題了，有需要的朋友參考看看!!這可是死很多腦細胞才有的心得喔!!

教學撰寫：徐嘉裕 Neil hsu