Safari xhr 拖放文件上传似乎发生了两次答案

【问题标题】：Safari xhr drag'n'drop file upload seems to occur twiceSafari xhr 拖放文件上传似乎发生了两次
【发布时间】：2011-11-05 06:10:44
【问题描述】：

它可能与 Webfaction 配置有关（他们有 nginx 代理，我的应用是在 apache2+mod_wsgi 下运行的 webpy），因为它可以在我的 dev cherrypy 服务器中运行。

以下是我用于上传的 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);
}

如果我在进度事件中填充百分比值，那么在 Safari 中它会从 0% 变为 100%，然后从 50% 变为 100%，然后上传完成。 Chrome 和 Firefox 都可以。

e.loaded == e.total 每次上传都会到达两次，因为我在控制台日志中看到了这一点：

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

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

【问题讨论】：

了解 drop 事件的触发方式和位置可能会有所帮助。我想知道是否有两个 drop 事件因某种原因被触发。
你查看files的内容了吗？
@Barum，后端获取正确大小的正确文件，但文件似乎每次上传都会传输两次。
@Ryan，我已经用 drop 事件绑定摘录更新了问题。我不认为这是一个问题，因为在我的代码中，上传会为每个删除的文件创建
元素，而且我绝对不会看到同一个文件被删除两次。

【解决方案2】：

我会尝试大量使用控制台来解决此类问题。在每次显示有意义的代码的每个主要代码段中放置一个控制台语句：

for (var i = 0; i < files.length; i++) 
{
console.log(files[i]+", "+i);    
upload(files[i])
};

然后再次插入您的upload()。

【讨论】：

我已经尝试记录不同的变量，但在我看来，一切都在幕后发生。
我并不是说你应该用它来检查变量值，而是检查你的代码的执行顺序。您不必为此使用变量 - 您可以使用纯文本。它非常简单，有助于解决代码中的逻辑/顺序错误。
为了检查我通常设置断点的执行顺序，Safari Web Inspector 中的脚本选项卡允许这样做。但这并没有帮助我在代码中找到问题。
断点的问题在于它确实做到了这一点。它会中断流程，并要求您使其继续到下一个断点。比实际打印序列要慢得多，而且我在试图记住我去过的地方时感到头疼。事实上，根据定义，这正是（控制台）日志的目的。