使用 JavaScript FileReader API 上传二进制文件时遇到问题
Trouble uploading binary files using JavaScript FileReader API
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
,但没有内容,当这个传递给服务器时,我看到的只是{}
。
- 这段代码仅适用于较新版本的浏览器..
谢谢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>
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
,但没有内容,当这个传递给服务器时,我看到的只是{}
。
- 这段代码仅适用于较新版本的浏览器..
谢谢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>