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

Question

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 fileContent），但它们似乎不起作用。

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

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

Answer 1

谢谢尼玛！因此，看起来 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]);
    }            
}

请参阅 NM 对问题的评论以获取相关页面的链接。

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