JS上传和本地预览图片上传图片数据需要formData格式本地预览可以用window.URL.createObjectU

上传图片数据需要formData格式
本地预览可以用window.URL.createObjectURL获取当前文件的内存URL，是同步获取的，需要手动释放内存

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<input id="load_img" type="file">
		<img id="preview_img" src="" />
		
		<input type="file" id="mutiple_img" name="filePath" multiple="multiple">
		<div id="preview_mutiple"></div>
		<script src="./js/jquery-1.9.min.js"></script>
		<script type="text/javascript">
			//验证图片格式
			function checkImage(files){
				for(let i=0; i<files.length;i++){
	                let fileName = files[i].name;
	                let fileFormat = fileName.split('.')[1].toLowerCase()
	                if(!fileFormat.match(/png|jpg|jpeg|gif/)){
	                	console.log('上传的格式需为png/jpg/jpeg/gif')
	                	return false
	                }
	           }
				return true
			}
			//上传单张图片
			let loadImg = $('#load_img');
			loadImg.change(function() {
				if(!checkImage($(this)[0].files)){
					return
				}
				let imgFile = $(this)[0].files[0];
				let formData = new FormData();
				formData.append('avatar', imgFile);
				//上传图片
				$.ajax({
//					url: '/upload_image',
//					type: 'post',
//					data: formData,
//					success: function(res) {
//						console.log(res.img); /*服务器端的图片地址*/
//						$("#preview_img").attr('src', '/' + res.img); /*预览图片*/
//					}
				})
				//本地预览
				let imgSrc = window.URL.createObjectURL(imgFile);
				$("#preview_img").attr('src', imgSrc);
				$("#preview_img").load(function(){//当图片加载后释放内存
					window.URL.revokeObjectURL(imgSrc)
				});
			})
			//上传多张图片
			let loadImgMutiple = $('#mutiple_img');
			loadImgMutiple.change(function() {
				console.log($(this)[0].files)
				if(!checkImage($(this)[0].files)){
					return
				}
				let formData = new FormData();
				for(let i=0; i<$(this)[0].files.length;i++){
	                formData.append("avatar",$(this)[0].files[i]);
	            }
				$.ajax({
//					url: '/upload_image',
//					type: 'post',
//					data: formData,
//					success: function(res) {
//						console.log(res);
//					}
				})
				//本地预览
				let imgsStr = ''
				for(let i=0; i<$(this)[0].files.length;i++){
	                let imgSrc = window.URL.createObjectURL($(this)[0].files[i]);
	                imgsStr += `<img src="${imgSrc}" />`
	            }
				$('#preview_mutiple').html(imgsStr)
			})
		</script>
	</body>
</html>