作者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