HTML FileReader

最新推荐文章于 2025-05-09 11:48:20 发布

X_X_OO

最新推荐文章于 2025-05-09 11:48:20 发布

阅读量419

点赞数

本文介绍了一种使用JavaScript实现的简单方法，允许用户从表单上传多个图片文件，并立即在网页上预览这些图片。

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

视图中
<-- 一个能上传多媒体文件的表单 -->
<input type="file" id="upload-file" multiple />

<-- 显示图片的地方 -->
<div id="destination"></div>




document.getElementById('upload-file').addEventListener('change', function() {
	var file;
	var destination = document.getElementById('destination');
	destination.innerHTML = '';

	// 循环用户多选的文件
	for(var x = 0, xlen = this.files.length; x < xlen; x++) {
		file = this.files[x];
		if(file.type.indexOf('image') != -1) { // 非常简单的交验

			var reader = new FileReader();

			reader.onload = function(e) {
				var img = new Image();
				img.src = e.target.result; // 显示图片的地方

				destination.appendChild(img);
			};
			
			reader.readAsDataURL(file);
		}
	}
});