ajax上傳檔案紀錄
如果是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'];
留言
張貼留言