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，但没有内容，当这个传递给服务器时，我看到的只是{}。< / p>

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

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上传二进制文件

2 个答案: