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类型接收图片