首页 技术文章 javascript

上传时预览图片

发布日期: 2024-05-06
FontSize: 【小 中 大】
上传时预览图片

默证的html上传组件没有图片预览功能，这种缺失的功能对用户的友好性会是减分项。上传图片时可以预览图片，还可以给用户带来安全感，他可以知道自己是否可能由于某种原因选择错了上传的图片。

如果用户在选择上传图片时，当用户选择了图片，并点击确定后，而屏幕上没有任何反应（如果位置大一些的话，会显示文件名，很小，有可能被用户忽略），用户可能会想，我选择的图片呢，失败了吗？

所以，上传时预览图片，是一个重要的加分体验。

上传时预览图片的几种方式

一、上传图片时使用js获取图片信息，把图片信息显示在预览位置。

二、上传图片时异步上传到服务器，然后从服务器返回图片信息，把图片信息显示在预览位置，这通常需要后端语言的配合，例如js+php。

具体采用哪种方式更好，这通常要看您的业务场景与需求，大多数情况下，使用第一种方式就好，因为如果用户选择错误，如果已经把图片上传到服务器，对资源来说是一种浪费。

使用js预览上传的图片

在线示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	#file-input { background-color: #f90;width:100px;}
	img { width:300px;}
</style>
</head>
<body>
<input type="file" id="file-input" multiple>
<div id="preview-container"></div>
<script type="application/javascript">
// 获取文件输入框和预览容器元素
var fileInput = document.getElementById('file-input');
var previewContainer = document.getElementById('preview-container');

// 监听文件选择事件
fileInput.addEventListener('change', function (event) {
	// 清空预览容器
	previewContainer.innerHTML = '';

	// 获取所有选择的文件
	var files = event.target.files;

	// 遍历每个文件
	for (var i = 0; i < files.length; i++) {
		var file = files[i];

		// 创建新的 FileReader 对象
		var reader = new FileReader();
		reader.fileIndex = i;

		// 设置文件加载完成后的回调函数
		reader.onload = function (fileEvent) {
			// 创建一个新的预览容器
			var previewItem = document.createElement('div');
			previewItem.className = 'preview-item';

			// 创建一个新的图像元素
			var img = document.createElement('img');
			img.src = fileEvent.target.result;

			// 创建一个撤回按钮
			var revokeButton = document.createElement('button');
			revokeButton.innerText = '移出';
			revokeButton.addEventListener('click', function () {
				// 删除当前预览项
				previewItem.parentNode.removeChild(previewItem);

				// 获取当前撤回的文件索引
				var index = this.parentNode.fileIndex;

				// 移除对应索引的文件
				fileInput.files.splice(index, 1);
			});

			// 将图像元素和撤回按钮添加到预览容器中
			previewItem.appendChild(img);
			previewItem.appendChild(revokeButton);

			// 将预览容器添加到预览容器中
			previewContainer.appendChild(previewItem);
		};

		// 读取文件内容
		reader.readAsDataURL(file);
	}
});
</script>
</body>

在上面的示例中，主要需要用到FileReader，FileReader是Web API中的一个接口，主要用于读取文件的内容。当你想从一个 <input type="file"> 元素中读取用户选择的文件，获取文件数据时，你就需要使用到。

FileReader提供了多种读取文件的方式：

readAsArrayBuffer(file):按字节读取文件内容，结果用ArrayBuffer对象表示。

readAsBinaryString(file):按字节读取文件内容，结果为文件的二进制串。

readAsDataURL(file):读取文件内容，结果用data:url的字符串形式表示。预览上传图片使用的就是该方式，获取的图片格式为base64，例如：data:image/webp;base64……

readAsText(file, encoding):按字符读取文件内容，结果用字符串形式表示。

FileReader的几个重要的属性：

FileReader.error: 表示在读文件操作过程中发生的错误。

FileReader.readyState: 表示 FileReader 读取数据的状态，有三个值：EMPTY（没有数据被加载）、LOADING（数据正在被加载）、DONE（数据已加载完成）。

FileReader.result: 代表数据读取完成后的结果，只有在数据被加载完成后，result 属性才有效。

FileReader.onabort: 在 FileReader 的读取操作被中断的时候触发。

注意：示例代码中，“移出”按钮移出的只是预览图片，上传组件里选择的图片文件仍然存在。

javascript