Ajax的核心是JavaScript物件XmlHttpRequest。該物件在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest可讓您使用JavaScript向伺服器提出請求並處理回應，而不會阻塞使用者。 Ajax對伺服器沒什麼要求，可以為Java EE應用程序，.NET應用程式和其他類型的應用程式服務。可以透過Ajax，可以編寫javascript程式碼來改進HTML，創造出豐富的互動性使用者體驗。
1. 認識FormData物件
FormData是Html5新加進來的一個類別,可以模擬表單資料
建構子
解釋
FormData (optional HTMLFormElement form) (可選) 一個HTML表單元素,可以包含任何形式的表單控制項,包含檔案輸入框.
#方法
void append(DOMString name, DOMString 值)
name 表單元素名稱
value 表單元素要傳遞的值
2. 使用javascript簡單實作
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實作
$('#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, //禁止设置请求类型
processData: false, //禁止jquery对DAta数据的处理,默认会处理
//禁止的原因是,FormData已经帮我们做了处理
success: function (result) { //测试是否成功
//但需要你后端有返回值
alert(result);
}
}
);
});4. ajaxfileupload.js外掛實作Ajax檔上傳
function upload(){
$.ajaxFileUpload({
url: 'a.php', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'file', //文件上传空间的id属性
dataType: 'HTML', //返回值类型 一般设置为json
success: function (data, status) //服务器成功响应处理函数 {
$("#img1").attr("src", data);
addI(data);
},
error: function (data, status, e)//服务器响应失败处理函数 {
alert(e);
}
}
);
}對於PHP就可以使用Files全域數組拿到檔案屬性,POST全域數組拿到userName的值
以上就是Ajax簡單實作檔案非同步上傳的多種方法,希望對大家有幫助。
相關推薦：
以上是Ajax之檔案非同步上傳的多種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
