在实现图片上传到服务器和本地预览时，出现了一些小问题，记录一下。
先看一张效果图吧，是单一图片，并不是多图上传，适用于上传头像等
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的时候就相当于falseif(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;//2Mvar 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.jpgfunction 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-Typeasync: false,//同步success:function(res){console.log(res)}}); */}}
后端注意事项
这里用的是SSH框架（本人更喜欢SSM），接收文件使用java.io.File类型，不然会报一个错误，以前文件上传使用的是MultipartFile类型接收，这里困扰了我好久，下面贴上报错截图。
报错：NoresultdefinedforactionXXXActionandresultinput
原因：前后端数据类型对应不一致
解决：后端改用java.io.File类型接收图片
