作者pttnews (PTT新聞)
看板Ajax
標題[問題] XMLHttpRequest 綁事件
時間Sun Oct 6 19:13:21 2013
請問我在做檔案上傳使用 XMLHttpRequest LV2
想要做到一個功能，告知USER 開始上傳、上傳中、上傳結束、上傳成功四種狀態
程式如下
var xhr = new XMLHttpRequest();
xhr.onload = function()
{
if (this.status == 200)
{
var jsonData = JSON.parse(this.response);
if (jsonData.message != "ok") {
showMsg('出錯了,'+ jsonData.message , false);
}else{
showMsg('上傳成功，路徑：'+ jsonData.return.seaveSrc , false);
}
};
};
xhr.upload.onprogress = function (event)
{
if (event.lengthComputable)
{
showMsg('開始上傳' , false);
}
}
xhr.upload.loadstart = function() {
showMsg('開始上傳' , false);
};
xhr.loadEnd = function() {
showMsg('上傳結束' , false);
};
xhr.error = function() {
showMsg('上傳失敗' , false);
};
xhr.abort = function() {
showMsg('上傳中斷，來自使用者' , false);
};
xhr.open('POST', contextRoot+"/saveImage.php",false);
xhr.send(formData);
結果不行，只有onload 發生作用
經過爬文，又改成
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("loadstart", function(e) {
showMsg('開始上傳' , false);
});
xhr.upload.addEventListener("load", function(e) {
showMsg('上傳結束' , false);
});
xhr.open('POST', contextRoot+"/saveImage.php",false);
xhr.send(formData);
結果也是不行，
檔案有傳到SERVER，也有回應，但是EVENT Function 沒有反應，
請問哪裡錯了嗎？
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 220.135.143.146
1F：推 qwer820404:傳輸速度太快會有來不及反應的情形… 10/06 19:48
2F：→ danny8376:傳輸快也沒反應進度的必要啊 都好了XDD 10/06 20:19
我剛剛試著甲地上傳到乙地，上傳13M檔案，傳了大概10多秒吧，
也沒有出現預期的event
※ 編輯: pttnews 來自: 210.63.96.2 (10/07 10:07)
3F：推 qwer820404:是完全沒出現嗎 還是有部份 可以提供測試平台資訊 10/07 10:48
只有出現 「上傳成功，路徑：XXXXX」
謝謝您
目前只接受JPG 檔案
※ 編輯: pttnews 來自: 210.63.96.2 (10/07 11:39)
4F：→ danny8376:突然注意到了 你是sync啊 10/07 13:36
5F：→ danny8376:sync的話到request整個結束前JS會完全被block啦 10/07 13:36
6F：→ danny8376:自然無法觸發事件 JS根本就動不了啊 10/07 13:37
7F：→ danny8376:有甚麼必須用sync的原因嗎? 不然改async 10/07 13:37
耶～真的耶，我設錯了，真是太感謝d大指點，
謝謝～感激萬分！
但是很奇怪的是 「上傳成功」、「傳送中」event 都有出現，開始傳送等Event並沒出現
真的很感謝大大指導，
再次跟您說謝謝～
※ 編輯: pttnews 來自: 210.63.96.2 (10/07 14:33)
8F：推 qwer820404:哇塞…小地方呀…真沒注意到 (汗) 10/07 15:27
※ 編輯: pttnews 來自: 210.63.96.2 (10/07 15:40)
9F：推 qwer820404:試試addEventListener給他第三個參數 false 10/07 15:57
10F：→ qwer820404:addEventListener("loadstart", function, false) 10/07 15:58
喔～ya~
有出現 開始上傳、上傳中、上傳結束 等event
如qwer大所述，要加入第三個參數
補上sample code
xhr.upload.addEventListener("loadstart", function(e){
showMsg('開始上傳' , false);
}, false);
xhr.upload.addEventListener("progress", function(e){
showMsg('上傳中' , false);
}, false);
xhr.upload.addEventListener("load", function(e){
showMsg('上傳結束' , false);
},false);
謝謝qwer大大，
兩位大德，小弟感激於心，謝謝～
※ 編輯: pttnews 來自: 220.135.143.146 (10/07 23:05)
11F：→ danny8376:個人都直接撿現成的uploader來用XDD 10/08 01:46