[問題] XMLHttpRequest 綁事件

看板Ajax作者 (PTT新聞)時間12年前 (2013/10/06 19:13), 編輯推噓4(407)
留言11則, 2人參與, 最新討論串1/1
請問我在做檔案上傳使用 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

10/06 19:48, , 1F
傳輸速度太快會有來不及反應的情形…
10/06 19:48, 1F

10/06 20:19, , 2F
傳輸快也沒反應進度的必要啊 都好了XDD
10/06 20:19, 2F
我剛剛試著甲地上傳到乙地,上傳13M檔案,傳了大概10多秒吧, 也沒有出現預期的event ※ 編輯: pttnews 來自: 210.63.96.2 (10/07 10:07)

10/07 10:48, , 3F
是完全沒出現嗎 還是有部份 可以提供測試平台資訊
10/07 10:48, 3F
只有出現 「上傳成功,路徑:XXXXX」 謝謝您 目前只接受JPG 檔案 ※ 編輯: pttnews 來自: 210.63.96.2 (10/07 11:39)

10/07 13:36, , 4F
突然注意到了 你是sync啊
10/07 13:36, 4F

10/07 13:36, , 5F
sync的話到request整個結束前JS會完全被block啦
10/07 13:36, 5F

10/07 13:37, , 6F
自然無法觸發事件 JS根本就動不了啊
10/07 13:37, 6F

10/07 13:37, , 7F
有甚麼必須用sync的原因嗎? 不然改async
10/07 13:37, 7F
耶~真的耶,我設錯了,真是太感謝d大指點, 謝謝~感激萬分! 但是很奇怪的是 「上傳成功」、「傳送中」event 都有出現,開始傳送等Event並沒出現 真的很感謝大大指導, 再次跟您說謝謝~ ※ 編輯: pttnews 來自: 210.63.96.2 (10/07 14:33)

10/07 15:27, , 8F
哇塞…小地方呀…真沒注意到 (汗)
10/07 15:27, 8F
※ 編輯: pttnews 來自: 210.63.96.2 (10/07 15:40)

10/07 15:57, , 9F
試試addEventListener給他第三個參數 false
10/07 15:57, 9F

10/07 15:58, , 10F
addEventListener("loadstart", function, false)
10/07 15:58, 10F
喔~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)

10/08 01:46, , 11F
個人都直接撿現成的uploader來用XDD
10/08 01:46, 11F
文章代碼(AID): #1IKKNK8X (Ajax)
文章代碼(AID): #1IKKNK8X (Ajax)