本文目錄一覽：
PHP 如何用ajax做文件上傳
通過傳統的form表單提交的方式上傳文件：
[html] view plain copy 在CODE上查看代碼片派生到我的代碼片form id= “uploadForm” action= “” method= “post” enctype =”multipart/form-data”
h1 測試通過Rest介面上傳文件 /h1
p 指定文件名： input type =”text” name=”filename” //p
p 上傳文件： input type =”file” name=”file” //p
p 關鍵字1： input type =”text” name=”keyword” //p
p 關鍵字2： input type =”text” name=”keyword” //p
p 關鍵字3： input type =”text” name=”keyword” //p
input type =”submit” value=”上傳”/
/form
不過傳統的form表單提交會導致頁面刷新，但是在有些情況下，我們不希望頁面被刷新，這種時候我們都是使用Ajax的方式進行請求的。
Ajax的方式進行請求：
[javascript] view plain copy 在CODE上查看代碼片派生到我的代碼片$.ajax({
url : “”,type : “POST”,
data : $( ‘#postForm’).serialize(),
success : function(data) {
$( ‘#serverResponse’).html(data);
},
error : function(data) {
$( ‘#serverResponse’).html(data.status + ” : ” + data.statusText + ” : ” + data.responseText);}
});
通常我們提交（使用submit button）時，會把form中的所有表格元素的name與value組成一個queryString，提交到後台。這用jQuery的方法來說，就是serialize。
通過$(‘#postForm’).serialize()可以對form表單進行序列化，從而將form表單中的所有參數傳遞到服務端。
但是上述方式，只能傳遞一般的參數，上傳文件的文件流是無法被序列化並傳遞的。
不過如今主流瀏覽器都開始支持一個叫做FormData的對象，有了這個FormData，我們就可以輕鬆地使用Ajax方式進行文件上傳了。
關於FormData及其用法
FormData是什麼呢？我們來看看Mozilla上的介紹。
XMLHttpRequest Level 2添加了一個新的介面FormData.利用FormData對象,我們可以通過JavaScript用一些鍵值對來模擬一系列表單控制項,我們還可以使用XMLHttpRequest的send()方法來非同步的提交這個”表單”.比起普通的ajax,使用FormData的最大優點就是我們可以非同步上傳一個二進位文件.
所有主流瀏覽器的較新版本都已經支持這個對象了，比如Chrome 7+、Firefox 4+、IE 10+、Opera 12+、Safari 5+。
參見：
FormData()
想得到一個FormData對象：
var formdata = new FormData();
W3c草案提供了三種方案來獲取或修改FormData。
方案1：創建一個空的FormData對象，然後再用append方法逐個添加鍵值對：
var formdata = new FormData();
formdata.append(“name”, “呵呵”);
formdata.append(“url”, “”);方案2：取得form元素對象，將它作為參數傳入FormData對象中！
var formobj = document.getElementById(“form”);var formdata = new FormData(formobj);
方案3：利用form元素對象的getFormData方法生成它！
var formobj = document.getElementById(“form”);var formdata = formobj.getFormData()
Method
FormData.append
本方法用於向已存在的鍵添加新的值，如該鍵不存在，新建之。
語法
formData.append(name, value);
formData.append(name, value, filename);
注: 通過 FormData.append()方法賦給欄位的值若是數字會被自動轉換為字元(欄位的值可以是一個Blob對象,一個File對象,或者一個字元串,剩下其他類型的值都會被自動轉換成字元串).
參數解釋
name
鍵 (key)， 對應表單域
value
表單域的值
filename (optional)
The filename reported to the server (a USVString), when a Blob or File is passed as the second parameter. The default filename for Blob objects is “blob”.
FormData.delete
將一對鍵和值從 FormData 對象中刪除。
formData.delete(username);
FormData.get
返回給定鍵的第一個值
formData.append(‘username’, ‘Justin’);
formData.append(‘username’, ‘Chris’);
formData.get(username); // “Justin”
FormData.getAll
返回給定鍵的所有值
formData.append(‘username’, ‘Justin’);
formData.append(‘username’, ‘Chris’);
formData.getAll(username); // [“Justin”, “Chris”]
FormData.has
檢查是否包含給定鍵，返回 true 或 false
formData.has(username);
FormData.set
設置給定鍵的值
formData.set(name, value);
formData.set(name, value, filename);
瀏覽器兼容情況
來自 MDN：
Desktop
FeatureChromeFirfox(Gecko)Intenet ExplorerOperaSafariBasic support7+4.0(2.0)10+12+5+
append with filename(Yes)22.0(22.0)???
delete, get, getAll, has, setBehind FlagNot supportedNot supported(Yes)Not supportedMobile
FeatureAndroidChrome AndroidFirfox Mobile (Gecko)Firfox OS (Gecko)IE MobileOpera MobileSafari MobileBasic support3.0?4.0(2.0)1.0.1?12+?
append with filename??22.0(22.0)1.2???
delete, get, getAll, has, set(Yes)(Yes)Not supportedNot supportedNot supported(Yes)Not supported2015年06月04日發布
Ajax通過FormData上傳文件
1.使用form表單初始化FormData對象方式上傳文件HTML代碼
form id=”uploadForm” enctype=”multipart/form-data”
input id=”file” type=”file” name=”file”/
button id=”upload” type=”button”upload/button
/form
javascript代碼
$.ajax({
url: ‘/upload’,
type: ‘POST’,
cache: false,
data: new FormData($(‘#uploadForm’)[0]),
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這裡要注意幾點：
processData設置為false。因為data值是FormData對象，不需要對數據做處理。
form標籤添加enctype=”multipart/form-data”屬性。
cache設置為false，上傳文件不需要緩存。
contentType設置為false，不設置contentType值，因為是由form表單構造的FormData對象，且已經聲明了屬性enctype=”multipart/form-data”，所以這裡設置為false。
上傳後，伺服器端代碼需要使用從查詢參數名為file獲取文件輸入流對象，因為input中聲明的是name=”file”。
如果不是用form表單構造FormData對象又該怎麼做呢？
2.使用FormData對象添加欄位方式上傳文件
HTML代碼
div id=”uploadForm”
input id=”file” type=”file”/
button id=”upload” type=”button”upload/button
/div
這裡沒有form標籤，也沒有enctype=”multipart/form-data”屬性。
javascript代碼
var formData = new FormData();
formData.append(‘file’, $(‘#file’)[0].files[0]);$.ajax({
url: ‘/upload’,
type: ‘POST’,
cache: false,
data: formData,
processData: false,
contentType: false
}).done(function(res) {
}).fail(function(res) {});
這裡有幾處不一樣：
append()的第二個參數應是文件對象，即$(‘#file’)[0].files[0]。
contentType也要設置為『false』。
從代碼$(‘#file’)[0].files[0]中可以看到一個input type=”file”標籤能夠上傳多個文件，只需要在input type=”file”里添加multiple或multiple=”multiple”屬性。
3.伺服器端讀文件
從Servlet 3.0 開始，可以通過 request.getPart() 或 request.getPars() 兩個介面獲取上傳的文件。
求助一AJAX請求多介面案例PHP多線程怎麼寫？
用一個介面去整合就行了，AJAX請求一個介面，在這個介面裡面把獲取到的數據提交到其他介面就行了
thinkphp中怎麼用ajax
thinkphp中使用ajax很簡單.主要掌握的地方有三個.
第一.tp中ajax的url需要使用大U方法.比如:$.post(“{:U(‘User/add’)}”)
第二.控制器中返回結果得第一種方法.$this-error(‘失敗’,”,true); 第三個參數為true.則發揮的是json數據.包含info.status.url三項.
第三.控制器中返回結果的第二種方法.$this-ajaxReturn(array(‘customKey1’=’customValue1′,’customKey2’=’customValue2′,’customKey3’=’customValue3’)).
掌握以上三點和ajax基本使用方法.那麼在tp中使用ajax也就掌握了.簡單的例子如下.偽代碼,或許有錯.
模板中:
script
$.post(“{:U(‘User/add’)”,{uname:xiaoming,age:15},function(data){
//data接收返回數據
if(data.status == 1){
alert(data.info);
location.href = data.url;
}else{
alert(‘錯誤’);
}
});
/script
控制器中:
public function add(){
if(IS_AJAX){
$name = I(‘post.name’,”,’trim’);
$age = I(‘post.age’,”,’trim’);
if($name $age){
//插入數據
$this-success(‘添加成功’,U(‘User/index’),true);
}else{
$this-ajaxReturn(array(
‘status’ = 0,
‘info’ = ‘大爺,您沒輸入名字’,
‘url’ = U(‘User/add’)
));
}
}else{
return false;
}
}
大概就是這樣子.至於剩下的$.ajax.$.getJson等等都是一樣的道理
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/288914.html
微信掃一掃 
支付寶掃一掃 