Safari xhr拖放文件上传两次

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.

它可以与web敌视配置相关(他们有nginx代理，我的应用是webpy在apache2+mod_wsgi下运行)，因为它在我的dev cherrypy服务器上工作。

Here are some bits from javascript code I use for upload:

下面是我上传的一些javascript代码:

/* 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);
}

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.

如果我在进度事件中填充span的百分比值，那么在Safari中它从0到100%，然后从50%到100%，然后上传完成。Chrome和Firefox都没问题。

e.loaded == e.total is reached twice per upload, since I see this in my console log:

e。加载= = e。因为我在我的控制台日志中看到:

console log http://img824.imageshack.us/img824/4363/screenshot20110827at101.png

控制台日志http://img824.imageshack.us/img824/4363/screenshot20110827at101.png

In the first logged event totalSize is equal to the size of file, but in the second it is twice as much.

在第一个日志事件中，totalSize等于文件的大小，但是在第二个日志事件中，它的大小是文件的两倍。

2 个解决方案

#1

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])
};

and then again inslide your upload().

然后再插入你的upload()。

#2

Could it have something to do with having a variable and a function with the same name (upload)? In Javascript, you can use the name of a function as a reference to it. Try renaming your xhr.upload variable and see if it fixes anything.

它是否与一个变量和一个同名的函数(上载)有关?在Javascript中，可以使用函数名作为对函数的引用。尝试重命名你的xhr。上传变量，看看它是否能修复任何东西。

#1