如何用ajax上傳文件
1 回答
守著星空守著你
TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超8個(gè)贊
用到兩個(gè)對(duì)象
第一個(gè)對(duì)象：FormData
第二個(gè)對(duì)象：XMLHttpRequest
目前新版的Firefox 與 Chrome 等支持HTML5的瀏覽器完美的支持這兩個(gè)對(duì)象，但I(xiàn)E9尚未支持 FormData 對(duì)象，還在用IE6 ? 只能仰天長(zhǎng)嘆....
有了這兩個(gè)對(duì)象，我們可以真正的實(shí)現(xiàn)Ajax方式上傳文件。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上傳文件</title>
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementByIdx_x_x("file").files[0]; // 獲取文件對(duì)象
var FileController = "../file/save"; // 接收上傳文件的后臺(tái)地址
// FormData 對(duì)象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表單數(shù)據(jù)
form.append("file", fileObj); // 文件對(duì)象
// XMLHttpRequest 對(duì)象
var xhr = new XMLHttpRequest();
xhr.open("post", FileController, true);
xhr.onload = function () {
alert("上傳完成!");
};
xhr.send(form);
}
</script>
</head>
<body>
<input type="file" id="file" name="myfile" />
<input type="button" onclick="UpladFile()" value="上傳" />
</body>
</html>
很簡(jiǎn)潔的代碼，便可以達(dá)到Ajax方式上傳文件，上面的代碼中使用<input type="file" />這種傳統(tǒng)的選擇文件的方法產(chǎn)生文件對(duì)象，HTML5還支持使用多種更靈活的方式，如拖拽文件到指定的元素上產(chǎn)生。
- 1 回答
- 0 關(guān)注
- 620 瀏覽
添加回答
舉報(bào)
0/150
提交
取消