前端如何在上传图片实现图片预览

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<img src="" alt="">
		<input type="file">
	</body>
	<script>
	</script>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script>
		$("input").change(function(e){
				 let file = e.target.files[0];
					let imgUrl = URL.createObjectURL(file);
					        // console.log(this.imgUrl);
					        // 4.将文件赋值给要提交的变量
					$("img").prop("src",imgUrl)			
					      let img = file;		  
			console.log(imgUrl);
			console.log(file);
			let formData = new FormData();
			formData.append('multipartFile',file);//键名要和后台一致
			// ajax提交
			$.ajax({
			    url: 'http://127.0.0.1:8991/minio/uploadvoide',
			    method: 'post',
			    data: formData,
			    // dataType: 'json',
			    contentType:false, // 提交给服务端的数据类型,不要当成字符串处理
			    processData:false, // 通过请求发送的数据是否转换为查询字符串
			    success: function (data) {
					console.log(data)
				},
			});
	
			
			
			
			
			
			
			
		});
		
		
	
		
	</script>
</html>



posted @ 2023-01-29 14:56  nulitao  阅读(52)  评论(0编辑  收藏  举报