Safari xhr drag'n'drop文件上传似乎发生了两次 [英] Safari xhr drag'n'drop file upload seems to occur twice
问题描述
它可能与Webfaction配置有关(他们有nginx代理,我的应用程序是在apache2 + mod_wsgi下运行的webpy),因为它可以在我的开发服务器上运行。
It can be related to Webfaction configuration (they have nginx proxy, and my app is webpy running under apache2+mod_wsgi) because it works in my dev cherrypy server.
以下是我用于上传的javascript代码中的一些位:
Here are some bits from javascript code I use for upload:
/* Bind drop events */
$(this).bind({
"dragover": function(e){
var dt = e.originalEvent.dataTransfer;
if(!dt) return;
if($.browser.webkit) dt.dropEffect = 'copy';
$(this).addClass("active");
return false;
},
"dragleave": function(e){
$(this).removeClass("active")
},
"dragenter": function(e){return false;},
"drop": function(e){
var dt = e.originalEvent.dataTransfer;
if(!dt&&!dt.files) return;
$(this).removeClass("active")
var files = dt.files;
for (var i = 0; i < files.length; i++) {
upload(files[i]);
}
return false;
}
})
/* Upload function code cut down to the basic */
function upload(file) {
var xhr = new XMLHttpRequest();
var xhr_upload = xhr.upload;
xhr_upload.addEventListener("progress", function(e){
if( e.lengthComputable ) {
var p = Math.round(e.loaded * 100 / e.total );
if(e.loaded == e.total){
console.log( e );
}
}
}, false);
xhr_upload.addEventListener( "load", function( e ){}, false);
xhr_upload.addEventListener( "error", function( error ) { alert("error: " + error); }, false);
xhr.open( 'POST', url, true);
xhr.onreadystatechange = function ( e ) { };
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xhr.setRequestHeader("Content-Type", file.type);
xhr.setRequestHeader("X-File-Name", encodeURIComponent(file.fileName));
xhr.setRequestHeader("X-File-Size", file.fileSize);
xhr.send(file);
}
如果我在进度事件中填充了百分比值,那么在Safari中它会去从0%到100%,然后从50%到100%,然后完成上传。 Chrome和Firefox都行。
If I fill span with percentage value in progress event, then in Safari it goes from 0% to 100%, then from 50% to 100%, and after that upload is done. Chrome and Firefox are OK.
e.loaded == e.total
每次上传两次,因为我在我的控制台日志中看到这个:
e.loaded == e.total
is reached twice per upload, since I see this in my console log:
控制台日志http: //img824.imageshack.us/img824/4363/screenshot20110827at101.png
在第一个记录的事件中,totalSize等于文件大小,但是第二个是它的两倍。
In the first logged event totalSize is equal to the size of file, but in the second it is twice as much.
推荐答案
我会尝试大量使用控制台来找到类似这样的东西。在每个显示一些有意义的代码的代码上放置一个控制台语句:
I would try heavy use of the console to get to the bottom of something like this. Put a console statement at every major piece of code displaying something meaningful each time:
for (var i = 0; i < files.length; i++)
{
console.log(files[i]+", "+i);
upload(files[i])
};
然后再次点击你的 upload()
。
这篇关于Safari xhr drag'n'drop文件上传似乎发生了两次的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!