1. 認(rèn)識(shí)FormData對(duì)象
FormData是Html5新加進(jìn)來的一個(gè)類,可以模擬表單數(shù)據(jù)
| 構(gòu)造函數(shù) | 解釋 |
|---|---|
| FormData (optional HTMLFormElement form) | (可選) 一個(gè)HTML表單元素,可以包含任何形式的表單控件,包括文件輸入框. |
方法
void append(DOMString name, DOMString value)
- name 表單元素名稱
- value 表單元素要傳遞的值
<form name="myForm" enctype="multipart/form-data">
<input type="text" name="userName">
<input type="file" name="img">
<input type="button" id="btn" value="submit">
</form>
2. 使用javascript簡單實(shí)現(xiàn)
function upload() {
var userName = document.myForm.userName.value;
var img = document.myForm.img.files[0];
var fm = new FormData();
fm.append('userName', userName);
fm.append('img', img);
var request = new XMLHttpRequest();
request.open('POST', 'submitform.php');
request.send(fm);
}
3. 使用Ajax實(shí)現(xiàn)
$('#btn').click(function () {
var userName = document.myForm.userName.value;
var img = document.myForm.img.files[0];
var fm = new FormData();
fm.append('userName', userName);
fm.append('img', img);
$.ajax(
{
url: 'submitform.php',
type: 'POST',
data: fm,
contentType: false, //禁止設(shè)置請(qǐng)求類型
processData: false, //禁止jquery對(duì)DAta數(shù)據(jù)的處理,默認(rèn)會(huì)處理
//禁止的原因是,FormData已經(jīng)幫我們做了處理
success: function (result) {
//測(cè)試是否成功
//但需要你后端有返回值
alert(result);
}
}
);
});
4. ajaxfileupload.js插件實(shí)現(xiàn)Ajax文件上傳
function upload(){
$.ajaxFileUpload({
url: 'a.php', //用于文件上傳的服務(wù)器端請(qǐng)求地址
secureuri: false, //一般設(shè)置為false
fileElementId: 'file', //文件上傳空間的id屬性
dataType: 'HTML', //返回值類型 一般設(shè)置為json
success: function (data, status) //服務(wù)器成功響應(yīng)處理函數(shù)
{
$("#img1").attr("src", data);
addI(data);
},
error: function (data, status, e)//服務(wù)器響應(yīng)失敗處理函數(shù)
{
alert(e);
}
}
);
}
- 對(duì)于PHP就可以使用Files全局?jǐn)?shù)組拿到文件屬性,POST全局?jǐn)?shù)組拿到userName的值
文章一： 個(gè)人搭建翻墻服務(wù)器
