怎麼用非同步ajax提交表單來上傳圖片檔案？
阿新 • • 發佈：2019-01-02
通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後臺。這用jQuery的方法來說，就是serialize。
1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片上傳測試</title> </head> <body> <form id="form" action="" method="post" enctype="multipart/form-data"> <input type="text" name="ss" value="kk"> <input type="text" value="kk"> <input type="text" value="kk"> <input type="file" name="img" value id="b"> <input type="button" id="submit" value="點選提交"> </form> </body> </html> <!-- <script src="../js/zepto.min.js"></script> --> <script src="../js/jquery-3.1.1.min.js"></script> <script> $(function(){ console.log($); $("#submit").click(function(){ var data = new FormData($("#form")[0]); console.log(data); $.ajax({ type:'post', url:'addImg_do.php', data:data, processData: false, contentType: false, success:function(res){ console.log('success------------'); console.log(res); } }); }); }) </script>
2.php服務端處理接收
<?php
@$dd = $_REQUEST['ss'] or die ('{"code":204,"msg":"ss is required"}');
$src = $_FILES['img'];
var_dump($src);
var_dump($dd);
// $name = $_FILES['img']['name'];
?>打印出結果
其中success------------ (index):39 array(5) { ["name"]=> string(6) "dd.jpg" ["type"]=> string(10) "image/jpeg" ["tmp_name"]=> string(24) "C:\xampp\tmp\php1722.tmp" ["error"]=> int(0) ["size"]=> int(41364) } string(2) "kk"
processData: false,
contentType: false,這兩個引數不能少一個。
form中必須要有:enctype="multipart/form-data",input中type設定為file
表單中enctype="multipart/form-data"的意思，是設定表單的MIME編碼。預設情況，這個編碼格式是application/x-www-form-urlencoded，不能用於檔案上傳；只有使用了multipart/form-data，才能完整的傳遞檔案資料，進行下面的操作.
enctype="multipart/form-data"是上傳二進位制資料; form裡面的input的值以2進位制的方式傳過去。
另外：這裡使用JQuery，但是老版本的JQuery比如1.2是不支援的，最好使用2.0以上或更新版本：
zepto.js也可以