关于HTML中上传图片

原创已于 2024-10-18 15:21:54 修改 · 置顶 · 4.9w 阅读

167 ·

CC 4.0 BY-SA版权

文章标签：

#关于HTML中上传图片 #html #前端

于 2018-10-14 10:06:16 首次发布

前端知识专栏收录该内容

49 篇文章

订阅专栏

关于HTML中上传图片

当表单包含文件上传元素时，必须将表单的enctype属性设置为multipart/form-data，并且method属性必须设置为post，这样浏览器才能正确识别并处理文件上传。通常，enctype属性是必不可少的，因为它能够确保文件内容以正确的格式发送到服务器，从而避免上传失败或文件损坏的情况。
浏览器只允许用户通过点击<input type="file">来选择本地文件，使用JavaScript对<input type="file">的value属性赋值是无效的。此外，当用户选择了某个文件后，JavaScript也无法直接获取该文件的真实路径，这是由于安全原因，浏览器不会暴露用户文件系统的具体结构。
不过，我们可以通过File和FileReader两个对象来获取文件信息并读取文件内容。这种方式可以让我们在用户选择文件后，获取到文件的详细信息，并进行相应的处理。例如，利用File对象，我们可以访问文件的名称、类型、大小等属性；而利用FileReader对象，则可以读取文件的内容，将其转换为文本或数据URL形式。这在实现图片预览、文件校验等功能时非常有用。

HTML文件：

<form method="post" enctype="multipart/form-data" id="file_upload">
	<p>图片预览：</p>
	<img id="image-preview">
	<p>
	<input type="file" id="file" name="upload_image" accept="image/gif, image/jpeg, image/png, image/jpg">
	<input type="button" value="下载图片" onclick="save()" />
	</p>
    <p id="info"></p>
</form>

CSS文件：

#image-preview {
	border: 1px solid #ccc;
	width: 100%;
	height: 100%;
	max-width: 200px;
	max-height: 200px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

JavaScript：

<script type="text/javascript">
			let fileInput = document.getElementById('file');
			let info = document.getElementById('info');
			let preview = document.getElementById('image-preview');
			// 监听change事件:
			fileInput.addEventListener('change', function() {
				// 清除背景图片:
				preview.style.backgroundImage = '';
				if (!fileInput.value) {
					info.innerHTML = '没有选择文件';
					return;
				}
				let file = fileInput.files[0];
				let size = file.size;
				if (size >= 1 * 1024 * 1024) {
					alert('文件大小超出限制');
					info.innerHTML = '文件大小超出限制';
					return false;
				}
				// 获取File信息:
				info.innerHTML = `文件名称:  + ${file.name}<br>文件大小: ${file.size} <br>上传时间: ${file.lastModifiedDate}`;
				if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
					alert('不是有效的图片文件!');
					return;
				}
				// 读取文件:
				let reader = new FileReader();
				reader.onload = function(e) {
					let data = e.target.result;
					console.log(preview, 'a标签')
					preview.src = data
				};
				// 以DataURL的形式读取文件:
				reader.readAsDataURL(file);

			});

			function save() {

				var url = preview.src; // 获取图片地址
				var a = document.createElement('a'); // 创建一个a节点插入的document
				var event = new MouseEvent('click') // 模拟鼠标click点击事件
				a.download = 'beautifulGirl' // 设置a节点的download属性值
				a.href = url; // 将图片的src赋值给a节点的href
				a.dispatchEvent(event)
			}
</script>