jQuery的$.ajax()与php后台交互，进行文件上传并保存在指定目录
不得不說，太孤陋寡聞了，上一篇jquery的$.ajax()利用FormData數據類型與php后臺交互寫到JavaScript沒有特定函數獲取文件名，現在要打臉了，看人家怎么說的：https://www.codexworld.com/how-to/get-file-info-name-size-type-javascript/
?
Before sending the file to the server for upload, it always a good idea to validate the file. Using JavaScript you can easily get the file info and validate in client-side. The following single line of javaScript code, help you to get the file name, size, type, and modified date
?
?
//DOM對象的FileUpload對象 var fileName = document.getElementById('file').files[0].name //文件名var fileSize = document.getElementById('file').files[0].size //文件大小var fileType = document.getElementById('file').files[0].type //文件類型var fileModifiedDate = document.getElementById('file').files[0].lastModifiedDate //文件最近修改日期?
本來一直都是直接使用jQuery來獲取元素id的，所以上面那句話我想著下面這行jQuery代碼來代替
?
?
?
var file = $("#file").files[0];//錯誤操作，為了演示用?
?
?
?
?
但是我發現會報錯，然后說是
DOM對象的方法jQuery對象是不能使用的。
?
然后找了大半天想知道jQuery對象和DOM對象的區別
?
DOM對象我覺得用以下的HTML DOM Tree來描述會好理解一下。
?
?
而Jquery對象我想會比較好理解一點，或者自行百度。W3School里面有講到jQuery的DOM元素方法，
所以我就想著JQuery對象轉化為DOM對象，然后使用，下面這句加上index索引[0]就可以轉化為DOM對象，神奇啊
?
var file = $("#file")[0].files[0]; //正確的JQuery對象轉換成DOM對象?
好吧，那么下面就準備上傳文件到服務器了，留意
對于php后臺，需要了解的知識是關于php文件的一些操作：
1、了解php的全局數組$_FILES：http://www.w3school.com.cn/php/php_file_upload.asp
2、了解php的文件上傳move_uploaded_file()函數：http://www.w3school.com.cn/php/func_filesystem_move_uploaded_file.asp
?
php的全局數組$_FILES
?
php的文件上傳move_uploaded_file()函數
?
好了，了解得差不多了，快要上代碼了，不過再等等，還要了解FormData.append()添加文件類型，上一篇jquery的$.ajax()利用FormData數據類型與php后臺交互說過在同一個鍵（name）append()多個值（value）的話，會疊加成集合（數組）的。那好吧，那就現在是折騰一番吧，雖然實踐出真知，但也過被自己坑個不少時間。嗚嗚嗚！~
?
注意是我用了FormData.append()了兩個文件，還有一點要注意的是，php的數組array不支持一個鍵有兩個值，只會覆蓋掉。
但是全局數組$_FILES的name、type、size等等就可以有多個值，個人感覺$_FILES是一個三維數組。
?
上代碼，
index.html代碼：
?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"><!--利用cdn添加js和css庫 --><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head> <body style="text-align: center; padding: 100px;">姓名： <input type="text" name="name" id="yourName" /><br>年齡： <input type="text" name="age" id="yourAge" /><br>性別： <input type="text" name="sex" id="yourSex"><br> 選擇文件1：<input type="file" name="file" id="file"><br> 選擇文件2：<input type="file" name="file" id="file2"><br><button id="send">提交</button> <br><br><br><br><div id="result">結果：</div> </body> <script type="text/javascript">$(function () {$("#send").click(function () {var name = $("#yourName").val();var age = $("#yourAge").val();var sex = $("#yourSex").val();var file1 = document.getElementById('file').files[0]; //獲取文件路徑名，注意了沒有files[1]這回事，已經試過坑//var file1 = $("#file")[0].files[0]; //這句跟上一面那句作用一樣var file2 = document.getElementById('file2').files[0]; //獲取文件路徑名，其實id相同也是可以的，不要用getElementById來區分就行console.log(document.getElementById('file').files[0].name);console.log(document.getElementById('file').files[0].size);console.log(document.getElementById('file').files[0].type);console.log(document.getElementById('file').files[0].lastModifiedDate);var formData = new FormData();formData.append('name',name);formData.append('name','123');//用于在php后臺演示直接$_POST['name']只會獲得最后的那個值123formData.append('age',age);formData.append('sex',sex);formData.append('file[]',file1);formData.append('file[]',file2); //疊加成數組，傳給php$.ajax({type: "POST",url: "server.php", //同目錄下的php文件data:formData,dataType:"json", //聲明成功使用json數據類型回調//如果傳遞的是FormData數據類型，那么下來的三個參數是必須的，否則會報錯cache:false, //默認是true，但是一般不做緩存processData:false, //用于對data參數進行序列化處理，這里必須false；如果是true，就會將FormData轉換為String類型contentType:false, //一些文件上傳http協議的關系，自行百度，如果上傳的有文件，那么只能設置為falsesuccess: function(msg){ //請求成功后的回調函數$("#result").append("你的名字是"+msg.name+"，性別："+msg.sex+"，年齡："+msg.age+"，上傳的文件名1："+msg.file1+"，上傳的文件名2："+msg.file2);}});})})</script></html>
server.php后臺代碼
?
?
<?phpdate_default_timezone_set('PRC'); //獲取中國時區，'PRC':中華人民共和國if(!file_exists(date("Ymd",time()))) //如果文件夾不存在，則創建一個mkdir(date("Ymd",time())); $username = $_POST['name']; //獲取索引$age = $_POST['age'];$sex = $_POST['sex'];$filesName = $_FILES['file']['name']; //文件名數組$filesTmpNamew = $_FILES['file']['tmp_name']; //臨時文件名數組for($i= 0;$i<count($filesName);$i++) // count():php獲取數組長度的方法{if(file_exists(date("Ymd",time()).'/'.$filesName[$i])){//die($filesName[$i]."文件已存在"); //如果上傳的文件已經存在}else{move_uploaded_file($filesTmpNamew[$i], date("Ymd",time()).'/'.$filesName[$i]); //保存在緩沖區的是臨時文件名而不是文件名}}//$file = basename($_POST['file']); //php的basename() 方法可獲取文件名// if(file_exists(date("Ymd",time()).'/'.$file)){// //die("文件已存在");// }// else{// move_uploaded_file($_FILES['file']['tmp_name'], date("Ymd",time()).'/'.$file);// }$json_array = array('name'=>$username,'age'=>$age ,'sex'=>$sex,'file1'=>$filesName[0] ,'file2'=>$filesName[1]); //轉換成數組類型$json= json_encode($json_array); //將數組轉換成json對象echo $json;?>?
?
結果：
?
?
?
?
?
?
總結
以上是生活随笔為你收集整理的jQuery的$.ajax()与php后台交互，进行文件上传并保存在指定目录的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cygwin下的gcc-4.7.1编译心
- 下一篇： PHP安全最大化