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

Question

java脚本的新手，无法解决这个问题，求助！

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

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

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

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

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

以及读取文件内容的java脚本代码：

        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 文件内容），但它们似乎没有用。

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

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

Answer 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 对问题的评论以获取相关页面的链接。

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

Answer 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>

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

Trouble uploading binary files using JavaScript FileReader API

javascript

file-upload

dojo

filereader