使用JavaScript FileReader API上载二进制文件时出现问题_Javascript_File Upload_Dojo_Filereader

使用JavaScript FileReader API上载二进制文件时出现问题

javascript file-upload dojo

使用JavaScript FileReader API上载二进制文件时出现问题,javascript,file-upload,dojo,filereader,Javascript,File Upload,Dojo,Filereader,javascript新手，在理解上有困难，请帮助我正在尝试使用Javascript FileReader API读取要上传到服务器的文件。到目前为止，它对文本文件非常有效当我尝试上载二进制文件（如image/.doc）时，这些文件似乎已损坏，无法打开在客户端使用dojo，在服务器端使用java，使用dwr处理远程方法调用。代码：使用html文件输入，用户可以选择多个文件一次上载： <input type="file" id="fileInput" multiple> 我已经

javascript新手，在理解上有困难，请帮助

我正在尝试使用Javascript FileReader API读取要上传到服务器的文件。到目前为止，它对文本文件非常有效

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

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

使用html文件输入，用户可以选择多个文件一次上载：

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

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

是否有一种方法可以使用FileReader，以便它可以读取任何类型的文本、图像、excel等文件

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

附言： 1.还尝试了reader.readAsArrayBuffer，结果ArrayBuffer对象显示了一些ByTeleLength，但没有内容，当它被传递到服务器时，我看到的只是{}

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

谢谢你，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对该问题的评论，以获得相关页面的链接

范例

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

抱歉，我想我无意中重写了其他人的editswave。您是否尝试使用键入的数组视图从数组缓冲区读取？由于您在服务器上使用java，并且需要将字节写入文件，因此“Int8Array”应该很有趣。看看这个——另外，根据W3C 2012年7月12日的工作草案，FileReader.readAsBinaryString似乎已被弃用。Source-@N.M，谢谢，成功了！欢迎，很高兴帮助：

    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]);
    }            
}

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