在实现图片上传到服务器和本地预览时,出现了一些小问题,记录一下。
先看一张效果图吧,是单一图片,并不是多图上传,适用于上传头像等
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类型接收图片