Fatal编程技术网
  • file/
  • File Firefox 7/8但非FF6/Chrome中的XHR.send错误：0x80460001（NS\u错误\u无法转换\u数据）

File Firefox 7/8但非FF6/Chrome中的XHR.send错误：0x80460001（NS\u错误\u无法转换\u数据）

file encoding

File Firefox 7/8但非FF6/Chrome中的XHR.send错误：0x80460001（NS\u错误\u无法转换\u数据）,file,encoding,upload,send,xmlhttprequest,File,Encoding,Upload,Send,Xmlhttprequest,firefox 7/8中的拖放文件上传脚本有问题。我编写了一个基本脚本，用于将放入html文档dropzone的文件上载到服务器端脚本save.php。包含javascript的完整html可以在下面找到。服务器端部分不是问题，因此我将它省略在save.php中 我什么都找了又试，但现在我真的卡住了。该脚本在firefox 6和chrome中运行，在我删除文件进行上传时没有任何javascript错误。此外，该文件正确保存在调用save.php的服务器上。 但在ff7/8中，当我将文件放到dro

firefox 7/8中的拖放文件上传脚本有问题。我编写了一个基本脚本，用于将放入html文档dropzone的文件上载到服务器端脚本save.php。包含javascript的完整html可以在下面找到。服务器端部分不是问题，因此我将它省略在save.php中

我什么都找了又试，但现在我真的卡住了。该脚本在firefox 6和chrome中运行，在我删除文件进行上传时没有任何javascript错误。此外，该文件正确保存在调用save.php的服务器上。 但在ff7/8中，当我将文件放到dropzone上进行上载时，firebug控制台中出现以下错误：

组件返回故障代码：0x80460001 NS\u错误\u无法\u转换\u数据 this.sendui8a.buffer；newfu.html第105行

有人能告诉我我做错了什么吗？这是firefox 7/8的一个bug吗？那么为什么它能在chrome和Firefox6中工作呢

我在xhr.send中发送的字符串是否未正确编码

非常感谢你的帮助

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cross browser drag and drop file upload example</title>
<script language="javascript" type="text/javascript" src="../js/jquery/js/jquery-1.6.4.min.js"></script>
<script>
    // add the dataTransfer property for use with the native `drop` event
    // to capture information about files dropped into the browser window
    jQuery.event.props.push("dataTransfer");

    $(function() {
        $('#dropzone').bind("drop",function(evnt) {
            evnt.stopPropagation();
            evnt.preventDefault();

            var data = evnt.dataTransfer;
            for (var i = 0; i < data.files.length; i++) {
                var file = data.files[i];


                var boundary = '------multipartformboundary' + (new Date).getTime();
                var dashdash = '--';
                var crlf     = '\r\n';

                // Build RFC2388 string
                var builder = '';
                var builder2 = '';

                builder += dashdash;
                builder += boundary;
                builder += crlf;

                // generate headers            
                builder += 'Content-Disposition: form-data; name="user_file[]"';
                if (file.fileName) {
                  builder += '; filename="' + file.fileName + '"';
                }
                builder += crlf;

                builder += 'Content-Type: application/octet-stream';
                builder += crlf;
                builder += crlf; 

                //
                // binary data string in FileReader's onload (see below)
                //

                builder2 += crlf;

                //write boundary
                builder2 += dashdash;
                builder2 += boundary;
                builder2 += crlf;

                // mark end of the request
                builder2 += dashdash;
                builder2 += boundary;
                builder2 += dashdash;
                builder2 += crlf;


                // setup filereader: read file and send it
                reader = new FileReader();
                reader.onload = function(evt) {
                    binary = evt.target.result;

                    var xhr = new XMLHttpRequest();
                    xhr.open("POST", "save.php", true);
                    xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);

                    //sendAsBinary: deprecated Mozilla only, define NEWsendAsBinary and use it in all browsers
                    if(!XMLHttpRequest.prototype.NEWsendAsBinary){
                        XMLHttpRequest.prototype.NEWsendAsBinary = function(datastr) {
                            function byteValue(x) {
                              return x.charCodeAt(0) & 0xff;
                            }
                            var ords = Array.prototype.map.call(datastr, byteValue);
                            var ui8a = new Uint8Array(ords);
                            this.send(ui8a.buffer);
                        }
                    }   
                    xhr.NEWsendAsBinary(builder+binary+builder2);
                };
                //read binary data
                reader.readAsBinaryString(file);
            }
            return false;
        }).bind ("dragover",function(evt) {
                evt.stopPropagation();
                evt.preventDefault();
                $(this).css({
                              border: '1px solid #ff0000'
                           });
                return false;
        });
    });
</script>
</head>
<body>
    <div id="dropzone">
        <p>Drop Files Here</p>
    </div>
</body>
</html>
我不知道为什么会出现这个错误，但是既然Fx支持sendAsBinary，为什么不在其中使用它呢

此外，我还修复了与file.name/file.fileName字段相关的问题，并将this.open改为xhr.open，因为Chrome和Fx对此的解释似乎有所不同

我对js非常陌生，所以我不确定，但这似乎在Fx5、Fx7和Chrome中都能起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>cross browser drag and drop file upload example</title>
<script language="javascript" type="text/javascript" src="/js/libs/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
// add the dataTransfer property for use with the native `drop` event
// to capture information about files dropped into the browser window
jQuery.event.props.push("dataTransfer");

$(function() {
    $('#dropzone').bind("drop",function(evnt) {
        evnt.stopPropagation();
        evnt.preventDefault();

        var data = evnt.dataTransfer;
        for (var i = 0; i < data.files.length; i++) {
            var file = data.files[i];
            var fileName;
            if(file.name)
                    fileName = file.name;
                else
                    fileName = file.fileName; 

            var boundary = '------multipartformboundary' + (new Date).getTime();
            var dashdash = '--';
            var crlf     = '\r\n';

            // Build RFC2388 string
            var builder = '';
            var builder2 = '';

            builder += dashdash;
            builder += boundary;
            builder += crlf;

            // generate headers
            builder += 'Content-Disposition: form-data; name="user_file[]"';
            if (fileName) {
                builder += '; filename="' + fileName + '"';
            }
            builder += crlf;

            builder += 'Content-Type: application/octet-stream';
            builder += crlf;
            builder += crlf;

            //
            // binary data string in FileReader's onload (see below)
            //

            builder2 += crlf;

            //write boundary
            builder2 += dashdash;
            builder2 += boundary;
            builder2 += crlf;

            // mark end of the request
            builder2 += dashdash;
            builder2 += boundary;
            builder2 += dashdash;
            builder2 += crlf;


            // setup filereader: read file and send it
            var reader = new FileReader();
            reader.onload = function(evt) {
                var binary = evt.target.result;

                var xhr = new XMLHttpRequest();
                xhr.open("POST", "save.php", true);
                xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);

                //sendAsBinary: deprecated Mozilla only, define NEWsendAsBinary and use it in other browsers
                if(!XMLHttpRequest.prototype.sendAsBinary){
                    XMLHttpRequest.prototype.NEWsendAsBinary = function(datastr) {
                                    function byteValue(x) {
                                return x.charCodeAt(0) & 0xff;
                            }
                            var ords = Array.prototype.map.call(datastr, byteValue);
                            var ui8a = new Uint8Array(ords);
                            xhr.send(ui8a.buffer);
                        }
                        xhr.NEWsendAsBinary(builder+binary+builder2);
                    }
                    else {
                        xhr.sendAsBinary(builder+binary+builder2);
                    }
                };

                //read binary data
                reader.readAsBinaryString(file);
            }
            return false;
        }).bind ("dragover",function(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            $(this).css({
            border: '1px solid #ff0000'
        });
        return false;
    });
});
</script>
</head>
<body>
    <div id="dropzone">
        <p>Drop Files Here</p>
    </div>
</body>
</html>
我遇到了类似的问题，最后不得不确保输入元素启用了multiselect，并且不再使用过时的属性fileName和fileSize

在我的情况下，我必须修改以下GWT文件：