html5 javascript FileReader 读取文件并传回后台保存

最新推荐文章于 2023-01-01 12:37:43 发布

大大超超

最新推荐文章于 2023-01-01 12:37:43 发布

阅读量1.5w

点赞数

分类专栏： Java JavaScript Html 文章标签： html5 javascript function buffer file image

本文链接：https://blog.youkuaiyun.com/ymjring/article/details/7190918

版权

JavaScript 同时被 3 个专栏收录

84 篇文章

订阅专栏

Html

29 篇文章

订阅专栏

Java

16 篇文章

订阅专栏

这篇博客介绍了如何使用HTML5的FileReader API读取文件，将文件以DataURL和BinaryString两种形式发送到后台。通过创建两个FileReader实例分别处理文件数据，然后通过JSON对象和AJAX传递给服务器。后台接收到数据后，将其转换为InputStream并保存到本地文件系统。文章提供了相关代码示例和参考资料链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html文件内容（需要部署在服务器上才可使用）：

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>拖拽本地图片到页面指定元素内</title>
<script type="text/javascript">
window.onload = function() {
var oDropBox = document.getElementById('dropBox');
oDropBox.addEventListener('dragover', function(e) {
e.stopPropagation();
e.preventDefault();
}, false);

oDropBox.addEventListener('drop', handleDrop, false);

function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
var fileList = e.dataTransfer.files;
var fileType = fileList[0].type;
var oImg = document.createElement('img');
oImg.setAttribute("style", "width:150px;height:150px;");

var reader = new FileReader();
var reader2 = new FileReader();
if (fileType.indexOf('image') == -1) {
alert('image only!');
return;
}
reader.readAsDataURL(fileList[0]);
reader.onload = function(e) {
oImg.src = this.result;
oDropBox.innerHTML = '';
oDropBox.appendChild(oImg);
};

reader2.readAsBinaryString(fileList[0]);
reader2.onload = function(e) {
imgBinaryString = this.result;
};
}
;
};
</script>
</head>
<body>
<div id="dropBox"
style="float: left; width: 400px; height: 300px; margin: 10px 0 0 0; border: 1px solid #015EAC; color: #666; overflow: hidden; clear: left; font-size: 12px;">
拖拽图片到这里！</div>
</body>

</html>

；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；

用两个FileReader变量来分别获取文件的DataURL和BinaryString类型的数据，得到数据后放到json中通过ajax传入后台。后面按传BinaryString数据处理：

后台以String类型得到imageData并做处理：

File imgFile = new File(imgURL);

saveImage(new ByteArrayInputStream(imageData.getBytes("ISO-8859-1")), imgFile);

public static void saveImage(InputStream ins, File file) throws IOException {
OutputStream os = new FileOutputStream(file);
int bytesRead = 0;
byte[] buffer = new byte[8192];
while ((bytesRead = ins.read(buffer, 0, 8192)) != -1) {
os.write(buffer, 0, bytesRead);
}
os.close();
ins.close();
}