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

javascript的新手,在解决此问题时遇到了麻烦,请帮助！

我正在尝试使用Javascript FileReader API读取文件以上传到服务器.到目前为止,它对文本文件非常有用.

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

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

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

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

以及读取文件内容的j​​avascript代码：

        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,但没有内容,当将其传递到服务器时,我看到的只是{}.

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

解决方法:

谢谢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的评论.

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

标签：file-upload,filereader,dojo,javascript
来源： https://codeday.me/bug/20191120/2047259.html