如何用ajax上傳文件
1 回答
守著星空守著你
TA貢獻1799條經驗 獲得超8個贊
用到兩個對象
第一個對象：FormData
第二個對象：XMLHttpRequest
目前新版的Firefox 與 Chrome 等支持HTML5的瀏覽器完美的支持這兩個對象，但IE9尚未支持 FormData 對象，還在用IE6 ? 只能仰天長嘆....
有了這兩個對象，我們可以真正的實現Ajax方式上傳文件。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<title>Html5 Ajax 上傳文件</title>
<script type="text/javascript">
function UpladFile() {
var fileObj = document.getElementByIdx_x_x("file").files[0]; // 獲取文件對象
var FileController = "../file/save"; // 接收上傳文件的后臺地址
// FormData 對象
var form = new FormData();
form.append("author", "hooyes"); // 可以增加表單數據
form.append("file", fileObj); // 文件對象
// XMLHttpRequest 對象
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>
很簡潔的代碼，便可以達到Ajax方式上傳文件，上面的代碼中使用<input type="file" />這種傳統的選擇文件的方法產生文件對象，HTML5還支持使用多種更靈活的方式，如拖拽文件到指定的元素上產生。
- 1 回答
- 0 關注
- 642 瀏覽
添加回答
舉報
0/150
提交
取消