其實呢，文件上傳的插件很多，可是現在做的東西要求盡量少用插件，所以就自己寫了一下。
之前也用node寫過對文件處理方面的東西，這次用php寫着試一下。
a.html文件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <html> <head> <title></title> </head> <body> <form enctype="multipart/form-data" id="uploadImg"> 上傳文件: <input name="file" type="file" id="file"> </form> </body> </html> <script src="jquery.js"></script> <script> $(function(){ $('input[type="file"]').on('change', function(){ var file = this.files[0]; var formData = new FormData($('#uploadImg')[0]); formData.append('file', file); console.log(formData.get('file')) $.ajax({ url: 'b.php', type: 'POST', cache: false, data: formData, //dataType: 'json', //async: false, processData: false, contentType: false, }).done(function(res) { console.log(res) }).fail(function(res) { console.log(res) }); }); }) </script>
b.php文件：
<?php //print_r($_FILES); $uptypes=array( 'image/jpg', 'image/jpeg', 'image/png', 'image/pjpeg', 'image/gif', 'image/bmp', 'image/x-png' ); $max_file_size=200000000; //上傳文件大小限制, 單位BYTE $file=$_FILES["file"]; $fileName=$file["name"]; $filetype = $file["type"]; $filesize = $file["size"]; if(!in_array($filetype, $uptypes)){ // 文件類型判斷 echo "文件類型不符!"; exit; } if($filesize > $max_file_size){ // 文件大小判斷 echo "文件太大!"; exit; } if (!is_dir("image/")) { //創建路徑 mkdir("image/"); } $url = "image/"; //當文件存在 if (file_exists($url.$fileName)) { //echo $fileName." already exists."; echo $url.$fileName; }else{//當文件不存在 $url=$url.$fileName; move_uploaded_file($_FILES["file"]["tmp_name"],$url); echo $url; } ?>
在這當中也遇到了幾個問題
1.在PHP中通過print_r($_FILES)打印時，有時候formData里面的參數type會為空，而在前端打印的formData.get('file')里是有type的值的，原因是PHP導入文件(我是導的圖片)有大小限制
解決方法：在php.ini中，搜索upload_max_filesize（默認為2M），修改這個值，重啟服務器即可。
2:在通過ajax進行數據請求時，console.log(formData)對象為空，而且在append后還是為空，是因為屬性不是直接掛載在你這個FormData，可以通過get方法進行獲取。
參考：https://segmentfault.com/q/1010000010087308
3:在一般情況下使用ajax請求，processData（默認為true）不需要設置，但是當使用fromdata上傳文件時，發送的對象不需要轉化為對象，所以必須設置為true。