jquery+FormData+SpringMVC圖片上傳預覽及一些小麻煩

在實現圖片上傳到服務器和本地預覽時，出現了一些小問題，記錄一下。

先看一張效果圖吧，是單一圖片，並不是多圖上傳，適用於上傳頭像等

1.H5

<li class="aui-list-item" style="padding-left:4%;margin-bottom: 0px;">
	<div class="aui-list-item-inner">
		<div class="aui-list-item-label" style="width: 25%;">上傳圖片</div>
		<div class="aui-list-item-input" style="width: 75%;">
							
		</div>
	</div>
</li>
<li class="aui-list-item" style="padding: 0 0 2% 6%">
	<div class="aui-list-item-inner">
		<div class="aui-list-item-input" style="width: 100%;">
			<div id="imgArea" style="display: inline-block;margin-right:4%;">
				<!-- <img src="img/damage.png" style="width: 4.8rem;height: 4.8rem;"> -->
				<!-- 圖片展示區域 -->	
			</div>
			<img alt="上傳圖片" src="img/camera.png" style="width: 4.8rem;height: 4.8rem" onclick="chooseImage(this)">
			<input type="file" style="display: none" id="img">
		</div>
	</div>
</li>

2.獲取圖片類型、大小、長寬以及上傳圖片的實際路徑

        //圖片類型驗證
	function verificationPicType(file) {
	    var fileTypes = [".JPG", ".PNG", ".JPEG"];
	    var filePath = file.value;
	    //當括號裏面的值爲0、空字符、false 、null 、undefined的時候就相當於false
	    if(filePath){
	        var isNext = false;
	        var fileEnd = filePath.substring(filePath.lastIndexOf(".")).toUpperCase();
	        for (var i = 0; i < fileTypes.length; i++) {
	            if (fileTypes[i] == fileEnd) {
	                isNext = true;
	                break;
	            }
	        }
	        if (!isNext){
	            alert('圖片格式錯誤');
	            file.value = "";
	            isNext = false;
	        }
	        return isNext;
	    }else {
	        return false;
	    }
	}
	//圖片大小驗證
	function verificationPicSize(file) {
	    var fileSize = 0;
	    var fileMaxSize = 1024*2;//2M
	    var filePath = file.value;
	    if(filePath){
	        fileSize =file.files[0].size;
	        var size = fileSize / 1024;
	        if (size > fileMaxSize) {
	            alert("圖片大小不能大於2M！");
	            file.value = "";
	            return false;
	        }else if (size <= 0) {
	            alert("圖片大小不能爲0M！");
	            file.value = "";
	            return false;
	        }
	        return true;
	    }else{
	        return false;
	    }
	}
	//獲取圖片絕對路徑，因瀏覽器保護顯示路徑爲C:\fakepath\a.jpg
	function getFilePath(file) {
		var dataURL;
		var width;
        var windowURL = window.URL || window.webkitURL;
		if (file && file.files && file.files[0]) {
            dataURL = windowURL.createObjectURL(file.files[0]);
        } else {
            dataURL = $file.val();
        }
		if(dataURL){
			//創建對象
			var img = new Image();
			//改變圖片路徑
			img.src = dataURL;
			//加載圖片後讀取原圖片寬高
			img.onload = function(){
			    // 打印
			    //alert('width:'+img.width+',height:'+img.height);
			    width = 4.8/img.height*img.width;
			};
		}
		return dataURL;
    } 

3.預覽實現

                function chooseImage(e) {
			$(e).next().click();
		}
		$("#img").change(function() {
			var file = $(this)[0];
			console.log($(this))
			//驗證圖片類型
			var type = verificationPicType(file);
			//驗證圖片大小
			var size = verificationPicSize(file);
			if(type&&size){
				$("#imgArea").empty();
			    var path = getFilePath(file);
			    $("#imgArea").append('<img src="'+path+'" style="width: 4.8rem;height: 4.8rem;">');
			}
		})

4.圖片上傳

前端

                function submit() {
			//獲取文件
			var file = $("#img")[0];
			var id = $("#id").text();
			//驗證圖片類型
			var type = verificationPicType(file);
			//驗證圖片大小
			var size = verificationPicSize(file);
			var path = $("#imgArea img").attr("src");
			//非空校驗
			if(!path){
				alert("未選擇圖片");
				return false;
			}
			if(type&size){
				var formData = new FormData();
		        formData.append("img", $("#img")[0].files[0]);//$("#img")[0].files[0]
		        formData.append("psId", id);
		        formData.append("process", process);
		        formData.append("keys", keys);      
		        //第一種  XMLHttpRequest 對象
               	        var xhr = new XMLHttpRequest();
               	        xhr.open("post", "${pageContext.request.contextPath}/ld!orderReview.action", true);
               	        xhr.onload = function () {
               		    alert("上傳完成!");
               	        };
                   	xhr.send(formData);
                   //第二種ajax上傳
		        /* $.ajax({
					url:"${pageContext.request.contextPath}/ld!orderReview.action",
					data:formData,
					dataType:"json",
					type:"post",
					cache: false,  
					processData: false,  //必須false纔會避開jQuery對 formdata 的默認處理   
			        contentType: false,  //必須false纔會自動加上正確的Content-Type
					async: false,//同步
					success:function(res){
						console.log(res)
					}
				}); */
			}
		}

後端注意事項

這裏用的是SSH框架（本人更喜歡SSM），接收文件使用java.io.File類型，不然會報一個錯誤，以前文件上傳使用的是MultipartFile類型接收，這裏困擾了我好久，下面貼上報錯截圖。

報錯：No result defined for action XXXAction and result input

原因：前後端數據類型對應不一致

解決：後端改用java.io.File類型接收圖片