关于HTML中上传图片

关于HTML中上传图片

值得注意的是：当一个表单里面包含这个上传元素的时候，表单的enctype必须指定为multipart/form-data,method必须指定为post，浏览器才会认识并正确执行。

但是还有一点，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：
但是有个方法可以，利用File和FileReader两个主要对象，可以获得文件信息并读取文件。

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>