前端图片预览与文件上传：使用JavaScript和AJAX-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43326384/article/details/124684721

本文介绍了如何使用JavaScript实现文件选择、图片预览，并通过AJAX将单个或多文件上传到服务器。重点展示了`previewImage`函数和`FormData`对象的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function previewImage(fileList,imgStyle,preview) {
		 for (var i = 0; i < fileList.length; i++) {
		 					   var file = fileList[i];
		 					   var imageType = new RegExp("^image\/");
		 					   if (!imageType.test(file.type)) continue;
		 	   
		 					   // 填充选择的图片到展示区
		 					   var img = document.createElement("img");
		 					   // img.setAttribute("style","width:auto;height:100px;margin-right:20px;");
		 					   img.setAttribute("style",imgStyle);
		 					   img.classList.add("obj");
		 					   img.file = file;
		 					   preview.appendChild(img);
		 	   
		 					   // 读取File对象中的内容
		 					   var reader = new FileReader();
		 					   reader.onload = (function (aImg) {
		 						   return function (e) {
		 							   aImg.src = e.target.result;
		 						   };
		 					   })(img);
		 					   reader.readAsDataURL(file);
		 }
	 }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>

</head>
<body>

    <input type="file" id="fileInput" name="file" multiple="multiple" accept="image/*">
	</br>
	<div id="preview" style="width: 900px;border: 1px lightslategray solid;"></div>

  <script src="js/jquery.js"></script>
  <script src="js/imageUtils.js"></script>
 <script>
	 $(function() {
		 // $("#fi").change(function(e) {
			//  console.log("jQuery")
			//  console.log(e)
		 // });
		 // 
	 });
	 
	 
	 var  fileList = [];
	 var fileInput = document.querySelector("#fileInput");
	 var preview = document.querySelector("#preview");
	 fileInput.addEventListener("change",function(event) {
		       // 文件列表对象
		           var fileList = this.files;
		           // // 获取第一个文件
		           // var file0 = fileInput.files[0];
		           // // 文件名
		           // var filename = file0.name;
		           // // 文件大小
		           // var filesize = file0.size;
		           // //文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读
		           // var type = file0.type; 
		           // // 文件的上次修改时间，格式为时间戳
		           // var lastModified = file0.lastModified;
		           // // 文件的上次修改时间，格式为 Date 对象实例
		           // var lastModifiedDate = file0.lastModifiedDate;
				   
				  previewImage(fileList,"width:auto;height:100px;margin-right:20px;",preview);
				
	 },false);
	 
	 
 </script>
</body>
</html>

单文件

	 fileInput.addEventListener("change",function(event) {
		           fileList = this.files;
				  previewImage(fileList,"width:auto;height:100px;margin-right:20px;",preview);
				  
				  var formData = new FormData();
				  formData.append("file",fileList[0]);
				    $.ajax ({
				          type : "post",
				          url : "http://127.0.0.1:8080/upload",
				          data : formData,
				          async : true,
				          cache : false,
						  contentType: false,
				          processData : false,
				          dataType : 'json',
				          success : function (data) {
							  console.log(data)
				          }
				      });
	 },false);

多文件

	 var  fileList = [];
	 var fileInput = document.querySelector("#fileInput");
	 var preview = document.querySelector("#preview");
	 fileInput.addEventListener("change",function(event) {
		           fileList = this.files;
				  previewImage(fileList,"width:auto;height:100px;margin-right:20px;",preview);
				  
				  var formData = new FormData();
				  var list = $("#fileInput")[0].files;
				  formData.append("name","file");
				  for (var i = 0; i < list.length; i++) {
				  	var item = list[i];
					formData.append("file",item);
				  }
				  // formData.append("file",list);
				  // console.log($("#fileInput")[0].files);
				    $.ajax ({
				          type : "post",
				          url : "http://127.0.0.1:8080/upload",
				          data : formData,
				          async : true,
				          cache : false,
						  contentType: false,
				          processData : false,
				          dataType : 'json',
				          success : function (data) {
							  console.log(data)
				          }
				      });
				
	 },false);