最近，越來(lái)越多的網(wǎng)站開(kāi)始使用Ajax技術(shù)來(lái)實(shí)現(xiàn)文件上傳功能。傳統(tǒng)的文件上傳方式是通過(guò)表單提交，但是這種方式會(huì)導(dǎo)致整個(gè)頁(yè)面刷新，用戶體驗(yàn)不佳。Ajax上傳文件出FormData外的方法應(yīng)運(yùn)而生，它能夠在不刷新頁(yè)面的情況下實(shí)現(xiàn)文件上傳。

在傳統(tǒng)的文件上傳方式中，我們通常會(huì)使用FormData對(duì)象來(lái)構(gòu)建表單數(shù)據(jù)，并通過(guò)ajax方法將數(shù)據(jù)發(fā)送到服務(wù)器端。但是，在某些場(chǎng)景下，我們可能需要將文件上傳以外的表單數(shù)據(jù)一起發(fā)送到服務(wù)器端，這就需要使用FormData之外的方法。

一個(gè)常用的方法是將文件和其他表單數(shù)據(jù)一起打包成JSON對(duì)象，然后通過(guò)ajax方法發(fā)送到服務(wù)器端。下面是一個(gè)示例：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
// 其他表單數(shù)據(jù)
var data = {
name: 'John',
age: 25
};
formData.append('data', JSON.stringify(data));
// 發(fā)送請(qǐng)求
$.ajax({
url: 'upload.php',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 處理響應(yīng)結(jié)果
},
error: function(xhr, status, error) {
// 處理錯(cuò)誤
}
});

在上述示例中，我們首先使用FormData對(duì)象來(lái)創(chuàng)建一個(gè)空表單數(shù)據(jù)，然后通過(guò)append方法將文件和其他表單數(shù)據(jù)添加到FormData對(duì)象中。注意，我們使用了JSON.stringify方法將JSON對(duì)象轉(zhuǎn)換為字符串并添加到FormData對(duì)象中。最后，我們使用ajax方法發(fā)送FormData對(duì)象到服務(wù)器端。

另一種常用的方法是將文件和其他表單數(shù)據(jù)一起拼接成查詢字符串，并作為data參數(shù)傳遞給ajax方法。例如：

var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
// 其他表單數(shù)據(jù)
var data = {
name: 'John',
age: 25
};
// 構(gòu)建查詢字符串
var queryString = 'file=' + encodeURIComponent(file) + '&name=' + encodeURIComponent(data.name) + '&age=' + encodeURIComponent(data.age);
// 發(fā)送請(qǐng)求
$.ajax({
url: 'upload.php',
type: 'POST',
data: queryString,
success: function(response) {
// 處理響應(yīng)結(jié)果
},
error: function(xhr, status, error) {
// 處理錯(cuò)誤
}
});

在以上示例中，我們首先獲取文件和其他表單數(shù)據(jù)，然后將它們拼接成查詢字符串。注意，在拼接查詢字符串時(shí)，我們使用encodeURIComponent方法來(lái)對(duì)特殊字符進(jìn)行編碼，以避免產(chǎn)生意外的錯(cuò)誤。最后，我們將查詢字符串作為data參數(shù)傳遞給ajax方法。

無(wú)論是將文件和其他表單數(shù)據(jù)打包成JSON對(duì)象，還是拼接成查詢字符串，都是常用的Ajax上傳文件出FormData外的方法。根據(jù)實(shí)際需求和場(chǎng)景，我們可以選擇合適的方法來(lái)實(shí)現(xiàn)文件上傳功能，并優(yōu)化用戶體驗(yàn)。