大家好!
我的 HTML5 XMLHttprequest uploader 有点问题。
我使用 Filereader 类从多个文件输入读取文件,然后一次上传一个二进制字符串。在服务器上,我捕获输入流中的位,将其放入 tmp 文件等。这部分很好。程序正常终止,发送响应,我在 header 中看到它(例如使用 FireBug)。 但是对于 JS,我只捕获了“onreadystatechange”中的最后一个。
我没有看到所有回复。为什么?如果有人能解决这个问题,那就太好了:)
你会看到相同的 jQuery 和模板,别担心 :D
这是 JS:
function handleFileSelect(evt)
{
var files = evt.target.files; // FileList object
var todo = {
progress:function(p){
$("div#up_curr_state").width(p+"%");
},
success:function(r,i){
$("#img"+i).attr("src",r);
$("div#upload_state").remove();
},
error:function(e){
alert("error:\n"+e);
}
};
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
var row = $('ul#image_list li').length;
row = row+i;
// Closure to capture the file information.
reader.onload = (function(theFile,s) {
return function(e) {
// Render thumbnail.
$("span#prod_img_nopic").hide();
$("div#prod_imgs").show();
var li = document.createElement('li');
li.className = "order_"+s+" active";
li.innerHTML = ['<img class="thumb" id="img'+s+'" src="', e.target.result,
'" title="', escape(theFile.name), '"/><div id="upload_state"><div id="up_curr_state"></div>Status</div>'].join('');
document.getElementById('image_list').insertBefore(li, null);
};
})(f,row);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
//upload the data
//@param object fileInputId input file id
//@param int fileIndex index of fileInputId
//@param string URL url for xhr event
//@param object todo functions of progress, success xhr, error xhr
//@param string method method of xhr event-def: 'POST'
var url = '{/literal}{$Conf.req_admin}{$SERVER_NAME}/{$ROOT_FILE}?mode={$_GET.mode}&action={$_GET.action}&addnew=product&imageupload={literal}'+f.type;
upload(f, row, url, todo);
}
上传功能:
function upload(file, fileIndex, Url, todo, method)
{
if (!method) {
var method = 'POST';
}
// take the file from the input
var reader = new FileReader();
reader.readAsBinaryString(file); // alternatively you can use readAsDataURL
reader.onloadend = function(evt)
{
// create XHR instance
xhr = new XMLHttpRequest();
// send the file through POST
xhr.open(method, Url, true);
// make sure we have the sendAsBinary method on all browsers
XMLHttpRequest.prototype.mySendAsBinary = function(text){
var data = new ArrayBuffer(text.length);
var ui8a = new Uint8Array(data, 0);
for (var i = 0; i < text.length; i++) ui8a[i] = (text.charCodeAt(i) & 0xff);
var bb = new (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder)();
bb.append(data);
var blob = bb.getBlob();
this.send(blob);
}
// let's track upload progress
var eventSource = xhr.upload || xhr;
eventSource.addEventListener("progress", function(e) {
// get percentage of how much of the current file has been sent
var position = e.position || e.loaded;
var total = e.totalSize || e.total;
var percentage = Math.round((position/total)*100);
// here you should write your own code how you wish to proces this
todo.progress(percentage);
});
// state change observer - we need to know when and if the file was successfully uploaded
xhr.onreadystatechange = function()
{
if(xhr.status == 200 && xhr.readyState == 4)
{
// process success
resp=xhr.responseText;
todo.success(resp,fileIndex);
}else{
// process error
todo.error(resp);
}
};
// start sending
xhr.mySendAsBinary(evt.target.result);
};
}
}
}
和启动事件
document.getElementById('files').addEventListener('change', handleFileSelect, false);
最佳答案
这是一个很小的错误:您忘记添加 var
语句:
// create XHR instance
var xhr = new XMLHttpRequest();
// ^^^ add this
像你的一样使用readystatechange
处理函数
function() {
if (xhr.status == 200 && xhr.readyState == 4) {
resp=xhr.responseText; // also a missing variable declaration, btw
todo.success(resp,fileIndex);
} else {
todo.error(resp);
}
}
当任何请求触发事件时,仅检查最新的 xhr 实例的 status
和 readyState
。因此,只有当最后一个 xhr 触发了事件本身时,success 函数才会被执行。
解决方案:修复所有变量声明,我想这不是唯一的(尽管严重影响行为)。您还可以使用 this
而不是 xhr
作为对事件处理程序中当前 XMLHttpRequest
实例的引用。
关于javascript - html5 多个 xmlhttprequest 更多响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11800955/