javascript – Safari xhr drag’n’drop文件上传似乎发生两次

它可以与Webfaction配置相关(他们有Nginx代理,我的应用程序是webpy运行在apache2 mod_wsgi下),因为它可以在我的dev cherrypy服务器中运行.

/* 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等于文件的大小,但在第二个事件中则是两倍.

解决方法

我会尝试大量使用控制台来达到这样的底部.在每个主要代码中放置一个控制台声明,每次都显示有意义的事情：

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

然后再次插上你的upload().

javascript – Safari xhr drag’n’drop文件上传似乎发生两次

解决方法

猜你在找的JavaScript相关文章