开发日常小结（19）: 前后端数据交互 -- ajax 与 FormData，用户上传图片时，异步ajax上传图片到服务器，并在页面显示图片

2018年5月15日10:42:05

今天完成一个小需求，属于后台web开发的功能：当用户点击按钮上传图片后，图片会上传服务器并显示出来。

【1】图片ajax异步上传

		<script type="text/javascript">
					//js 读取图片文件，限制长度宽度
				    function jsReadFiles(files) {
				    	var width = 0;
				    	var height = 0;
				        if (files.length) {
				            var file = files[0];
				          	//alert("**********"+file.size);
				          	//读取图片数据
			                var reader = new FileReader();
			                reader.onload = function (e) {
			                    var data = e.target.result;
			                    //加载图片获取图片真实宽度和高度
			                    var image = new Image();
			                    image.onload=function(){
			                    	width  = image.width;
			                    	height = image.height;
			                    	if(width != 714){
							        	//basic.alert("图片格式错误，上传尺寸的宽度必须为714，请重新上传图片！");
								        //$("#fileUpload").val(null);
			                    		//return ;
			                    		var formData = new FormData($("#fileUploadForm")[0]);    
				       	           	     $.ajax({
				       	           	          url: '${contextPath}/public/previewPic' ,  /*这是处理文件上传的servlet*/  
				       	           	          type: 'POST',    
				       	           	          data: formData,    
				       	           	          async: false,    
				       	           	          cache: false,    
				       	           	          contentType: false,    
				       	           	          processData: false,    
				       	           	          success: function (data) {
				       	           	        	  var json = JSON.parse(data);
				       	           	    	alert("** 图片路径是："+ json.imgUrl
			       	           	        			  + "** 图片key是："+ json.imgKey); 
		       	           	        	  $("#display-img").attr("src",json.imgUrl);
				       	           	          },    
				       	           	          error: function (returndata) {    
				       	           	              alert(returndata);    
				       	           	          }    
				       	           	     }); 
			                    	}else if(width == 714){
			                    		if(height != 0){
									    	basic.alert("格式正确，图片上传成功！");  
			                    		}
			                    	}
			                    };
			                    image.src= data;
			                };
			                reader.readAsDataURL(file);
			            }
		        }	
			</script>

【2】页面显示图片

使用到<img>标签，将src属性设为图片服务器的返回url即可。

【3】formData

FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。其主要用于发送表单数据，但亦可用于发送带键数据(keyed data)，而独立于表单使用。如果表单enctype属性设为multipart/form-data ，则会使用表单的submit()方法来发送数据，从而，发送数据具有同样形式。这里使用formData将表单的文件作为数据流上传。

参考文章： https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/Using_FormData_Objects