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()PS： 1.也尝试了
reader.readAsArrayBuffer()ArrayBufferbyteLength{}谢谢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
示例
<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>
您可以直接上传 File 对象，而不是搞乱 FileReader，因为它已经是 Blob 的实例并且是二进制格式的。 FileReader 的目的是将已经是二进制的表示形式更改为对前端有用的内容，例如文本或数据 URL 或可以操作的数组缓冲区，而不是将已经是二进制的内容转换为二进制。换句话说，如果您只是要上传二进制内容，那么阅读它或使用 FileReader API 根本没有意义。额外提示：使用 multipart/form-data。