使用 JavaScript FileReader API 上传二进制文件时遇到问题答案

【问题标题】：Trouble uploading binary files using JavaScript FileReader API使用 JavaScript FileReader API 上传二进制文件时遇到问题
【发布时间】：2015-03-07 10:46:13
【问题描述】：

JavaScript 新手，无法解决这个问题，求助！

我正在尝试使用 Javascript FileReader API 来读取要上传到服务器的文件。到目前为止，它适用于文本文件。

当我尝试上传二进制文件时，例如 image/.doc，文件似乎已损坏，无法打开。

在客户端使用dojo，在服务器端使用java，用dwr处理远程方法调用。代码：

使用 html 文件输入，因此用户可以一次选择多个文件进行上传：

<input type="file" id="fileInput" multiple>

以及读取文件内容的javascript代码：

        uploadFiles: function(eve) {
        var fileContent = null;

        for(var i = 0; i < this.filesToBeUploaded.length; i++){
            var reader = new FileReader();
            reader.onload = (function(fileToBeUploaded) {
                return function(e) {
                    fileContent = e.target.result;
                    // fileContent object contains the content of the read file
                };
            })(this.filesToBeUploaded[i]);

            reader.readAsBinaryString(this.filesToBeUploaded[i]);
        }            
    }

fileContent 对象将作为参数发送到 java 方法，该方法将写入文件。

    public boolean uploadFile(String fileName, String fileContent) {
    try {
        File file = new File("/home/user/files/" + fileName);
        FileOutputStream outputStream = new FileOutputStream(file);
        outputStream.write(fileContent.getBytes());
        outputStream.close();
    } catch (FileNotFoundException ex) {
        logger.error("Error uploading files: ", ex);
        return false;
    } catch (IOException ioe) {
        logger.error("Error uploading files: ", ioe);
        return false;
    }
    return true;
}

我已经阅读了一些建议使用 xhr 和 servlet 来实现此目的的答案。

有没有办法使用 FileReader，让它可以读取任何类型的文件（文本、图像、excel 等）？

我曾尝试使用reader.readAsBinaryString() 和reader.readAsDataUrl()（在写入文件之前解码base64 文件内容），但它们似乎不起作用。

PS： 1.也试过reader.readAsArrayBuffer()，结果ArrayBuffer对象显示一些byteLength，但没有内容，当这个传递到服务器时，我看到的只是{}。

这段代码仅适用于较新版本的浏览器..

【问题讨论】：

抱歉，我想我不小心覆盖了其他人的编辑内容
您是否尝试过使用类型化数组视图从数组缓冲区中读取数据？由于您在服务器上使用 java，并且需要将字节写入文件，您应该会发现“Int8Array”很有趣。看看这个 - developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays
此外，根据 W3C 的 2012 年 7 月 12 日工作草案，看起来 FileReader.readAsBinaryString 已被弃用。来源 - developer.mozilla.org/en-US/docs/Web/API/…
@N.M，谢谢，成功了！
欢迎，很高兴为您提供帮助:)

标签： javascript file-upload dojo filereader

【解决方案1】：

感谢 N.M！因此，看起来 ArrayBuffer 对象不能直接使用，必须创建 DataView 才能使用它们。以下是有效的 -

    uploadFiles: function(eve) {
    var fileContent = null;

    for(var i = 0; i < this.filesToBeUploaded.length; i++){
        var reader = new FileReader();
        reader.onload = (function(fileToBeUploaded) {
            return function(e) {
                fileContent = e.target.result;
                var int8View = new Int8Array(fileContent);
                // now int8View object has the content of the read file!
            };
        })(this.filesToBeUploaded[i]);

        reader.readAsArrayBuffer(this.filesToBeUploaded[i]);
    }            
}

请参考 N.M 的 cmets 问题以获得相关页面的链接。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays

【讨论】：

【解决方案2】：

例子

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewImage() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadImage").files[0]);
            oFReader.onload = function (oFREvent) {
                var sizef = document.getElementById('uploadImage').files[0].size;
                document.getElementById("uploadPreview").src = oFREvent.target.result;
                document.getElementById("uploadImageValue").value = oFREvent.target.result; 
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var imgUrl = $('#uploadImageValue').val();
                alert(imgUrl);

                //here ajax
            });
        });
        </script>
        <div>
            <input type="hidden" id="uploadImageValue" name="uploadImageValue" value="" />
            <img id="uploadPreview" style="width: 150px; height: 150px;" /><br />
            <input id="uploadImage" style="width:120px" type="file" size="10" accept="image/jpeg,image/gif, image/png" name="myPhoto" onchange="PreviewImage();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>

【讨论】：