java webApp异步上传图片实现代码
如何实现javawebApp异步上传图片，先了解以下几个问题：
1.图片上传；
2.图片上传预览；
3.上传图片更改地址异步添加到数据库；
主要内容
本示例主要采用纯HTML前端和JavaScript代码作工具，查询有关demo其实现图片上传的代码范例如下：
（1）点击上传图片的div代码：
<divid="div1"class="photo"> <inputtype="file"id="choose"accept="image/*"multiple> <aid="upload">上传图片</a> <aclass="myinputimg"onclick="selectphoto();">从图库中选择</a> <aclass="myinputimg"id="back">取消</a> </div>
（2）javaScript代码
<scripttype="text/javascript">
//获取上传图片的input表单元素
varfilechooser=document.getElementById("choose");
//创建用于压缩图片的canvas
varcanvas=document.createElement("canvas");
//获取canvas的视觉属性
varctx=canvas.getContext('2d');
//瓦片canva
vartCanvas=document.createElement("canvas");
vartctx=tCanvas.getContext("2d");
//画布的大小
varmaxsize=100*1024;
//上传图片点击事件
$("#upload").on("click",function(){
filechooser.click();
})
.on("touchstart",function(){
//添加元素属性
$(this).addClass("touch");
})
.on("touchend",function(){
//移除元素属性
$(this).removeClass("touch");
});
//元素改变
filechooser.onchange=function(){
//如果选择为空，返回操作
if(!this.files.length)return;
//创建上传图片的数组
varfiles=Array.prototype.slice.call(this.files);
//选择为数量大于1张时，反回操作，这里根据需求设定；pc端测试一次可以上传若干张图片，移动端选择一张，页面只能预览一张。由于是移动端，所以作此判断。
if(files.length>1){
alert("一次只能上传1张图片");
return;
}
//遍历上传图片的文件数组，可不用遍历，直接取即可。
files.forEach(function(file,i){
//判断图片格式
if(!/\/(?:jpeg|png|gif)/i.test(file.type))return;
varreader=newFileReader();
varli=document.createElement("li");
//获取图片大小
varsize=file.size/1024>1024?(~~(10*file.size/1024/1024))/10+"MB":~~(file.size/1024)+"KB";
//图片预览
li.innerHTML='<divclass="progress"><span></span></div><divclass="size">'+size+'</div>';
//追加图片预览代码；
$(".img-list").append($(li));
reader.onload=function(){
varresult=this.result;
varimg=newImage();
img.src=result;
//图片显示
$(li).css("background-image","url("+result+")");
//如果图片大小小于100kb，则直接上传
if(result.length<=maxsize){
img=null;
upload(result,file.type,$(li));
return;
}
//图片加载完毕之后进行压缩，然后上传
if(img.complete){
callback();
}else{
img.onload=callback;
}
functioncallback(){
vardata=compress(img);
upload(data,file.type,$(li));
img=null;
}
};
reader.readAsDataURL(file);
});
};
//以下是图片压缩相关；
//使用canvas对大图片进行压缩
functioncompress(img){
varinitSize=img.src.length;
varwidth=img.width;
varheight=img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
varratio;
if((ratio=width*height/4000000)>1){
ratio=Math.sqrt(ratio);
width/=ratio;
height/=ratio;
}else{
ratio=1;
}
canvas.width=width;
canvas.height=height;
//铺底色
ctx.fillStyle="#fff";
ctx.fillRect(0,0,canvas.width,canvas.height);
//如果图片像素大于100万则使用瓦片绘制
varcount;
if((count=width*height/1000000)>1){
count=~~(Math.sqrt(count)+1);//计算要分成多少块瓦片
//计算每块瓦片的宽和高
varnw=~~(width/count);
varnh=~~(height/count);
tCanvas.width=nw;
tCanvas.height=nh;
for(vari=0;i<count;i++){
for(varj=0;j<count;j++){
tctx.drawImage(img,i*nw*ratio,j*nh*ratio,nw*ratio,nh*ratio,0,0,nw,nh);
ctx.drawImage(tCanvas,i*nw,j*nh,nw,nh);
}
}
}else{
ctx.drawImage(img,0,0,width,height);
}
//进行最小压缩
varndata=canvas.toDataURL('image/jpeg',0.1);
console.log('压缩前：'+initSize);
console.log('压缩后：'+ndata.length);
console.log('压缩率：'+~~(100*(initSize-ndata.length)/initSize)+"%");
tCanvas.width=tCanvas.height=canvas.width=canvas.height=0;
returnndata;
}
//图片上传，将base64的图片转成二进制对象，塞进formdata上传
functionupload(basestr,type,$li){
vartext=window.atob(basestr.split(",")[1]);
varbuffer=newUint8Array(text.length);
varpecent=0,loop=null;
for(vari=0;i<text.length;i++){
buffer[i]=text.charCodeAt(i);
}
varblob=getBlob([buffer],type);
varxhr=newXMLHttpRequest();
varformdata=getFormData();
formdata.append('upload',blob);
//异步请求kindeditor插件的上传图片jsp页面
xhr.open('post','<%=request.getContextPath()%>/kindeditor/jsp/upload_json.jsp');
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
//返回服务器端的图片地址
varface_img=xhr.responseText;
varid=$("#arId").text();
//异步像数据库中添加图片
$.ajax({
type:"POST",
//异步请求Struts的action类将图片地址插入数据库
url:"add_article_faceurl.action",
dataType:"json",
data:"faceurl="+face_img+"&id="+id,
async:true,
success:function(msg){
//取添加数据库中的图片相关的id值，存入页面隐藏区域
$("#arId").text(msg);
},
error:function(a){}
});
}
};
//模拟上传进度显示
//数据发送进度，前50%展示该进度
xhr.upload.addEventListener('progress',function(e){
if(loop)return;
pecent=~~(100*e.loaded/e.total)/2;
$li.find(".progressspan").css('width',pecent+"%");
if(pecent==50){
mockProgress();
}
},false);
//数据后50%用模拟进度
functionmockProgress(){
if(loop)return;
loop=setInterval(function(){
pecent++;
$li.find(".progressspan").css('width',pecent+"%");
if(pecent==99){
clearInterval(loop);
}
},100);
}
xhr.send(formdata);
}
/**
*获取blob对象的兼容性写法
*@parambuffer
*@paramformat
*@returns{*}
*/
functiongetBlob(buffer,format){
try{
returnnewBlob(buffer,{type:format});
}catch(e){
varbb=new(window.BlobBuilder||window.WebKitBlobBuilder||window.MSBlobBuilder);
buffer.forEach(function(buf){
bb.append(buf);
});
returnbb.getBlob(format);
}
}
/**
*获取formdata
*/
functiongetFormData(){
varisNeedShim=~navigator.userAgent.indexOf('Android')
&&~navigator.vendor.indexOf('Google')
&&!~navigator.userAgent.indexOf('Chrome')
&&navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop()<=534;
returnisNeedShim?newFormDataShim():newFormData();
}
/**
*formdata补丁,给不支持formdata上传blob的android机打补丁
*@constructor
*/
functionFormDataShim(){
console.warn('usingformdatashim');
varo=this,
parts=[],
boundary=Array(21).join('-')+(+newDate()*(1e16*Math.random())).toString(36),
oldSend=XMLHttpRequest.prototype.send;
this.append=function(name,value,filename){
parts.push('--'+boundary+'\r\nContent-Disposition:form-data;name="'+name+'"');
if(valueinstanceofBlob){
parts.push(';filename="'+(filename||'blob')+'"\r\nContent-Type:'+value.type+'\r\n\r\n');
parts.push(value);
}
else{
parts.push('\r\n\r\n'+value);
}
parts.push('\r\n');
};
//OverrideXHRsend()
XMLHttpRequest.prototype.send=function(val){
varfr,
data,
oXHR=this;
if(val===o){
//Appendthefinalboundarystring
parts.push('--'+boundary+'--\r\n');
//Createtheblob
data=getBlob(parts);
//Setupandreadtheblobintoanarraytobesent
fr=newFileReader();
fr.onload=function(){
oldSend.call(oXHR,fr.result);
};
fr.onerror=function(err){
throwerr;
};
fr.readAsArrayBuffer(data);
//Setthemultipartcontenttypeandboudary
this.setRequestHeader('Content-Type','multipart/form-data;boundary='+boundary);
XMLHttpRequest.prototype.send=oldSend;
}
else{
oldSend.call(this,val);
}
};
}
</script>
（3）kindeditor插件的上传图片jsp页面相关代码.
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<%@pageimport="java.util.*,java.io.*"%>
<%@pageimport="java.text.SimpleDateFormat"%>
<%@pageimport="org.apache.commons.fileupload.*"%>
<%@pageimport="org.apache.commons.fileupload.disk.*"%>
<%@pageimport="org.apache.commons.fileupload.servlet.*"%>
<%@page
import="org.apache.struts2.dispatcher.multipart.MultiPartRequestWrapper"%>
<%@pageimport="org.json.simple.*"%>
<%
/**
*KindEditorJSP
*
*本JSP程序是演示程序，建议不要直接在实际项目中使用。
*如果您确定直接使用本程序，使用之前请仔细确认相关安全设置。
*
*/
//文件保存目录路径
StringsavePath=pageContext.getServletContext().getRealPath("/")+"attached/";
//StringsavePath="http:\\\\192.168.1.226:8080\\qslnbase\\uploadFile/";
//StringsavePath="D:/WWW/qslnADP/ADP/WebRoot/kindeditor/attached/";
//文件保存目录URL
StringsaveUrl=request.getContextPath()+"/attached/";
//定义允许上传的文件扩展名
HashMap<String,String>extMap=newHashMap<String,String>();
extMap.put("image","gif,jpg,jpeg,png,bmp,blob");
extMap.put("flash","swf,flv");
extMap.put("media","swf,flv,mp3,wav,wma,wmv,mid,avi,mpg,asf,rm,rmvb");
extMap.put("file","doc,docx,xls,xlsx,ppt,htm,html,txt,zip,rar,gz,bz2");
//最大文件大小
longmaxSize=1000000;
response.setContentType("text/html;charset=UTF-8");
if(!ServletFileUpload.isMultipartContent(request)){
out.println(getError("请选择文件。"));
return;
}
//检查目录
FileuploadDir=newFile(savePath);
if(!uploadDir.isDirectory()){
out.println(getError("上传目录不存在。"));
return;
}
//检查目录写权限
if(!uploadDir.canWrite()){
out.println(getError("上传目录没有写权限。"));
return;
}
StringdirName=request.getParameter("dir");
if(dirName==null){
dirName="image";
}
if(!extMap.containsKey(dirName)){
out.println(getError("目录名不正确。"));
return;
}
//创建文件夹
savePath+=dirName+"/";
saveUrl+=dirName+"/";
FilesaveDirFile=newFile(savePath);
if(!saveDirFile.exists()){
saveDirFile.mkdirs();
}
SimpleDateFormatsdf=newSimpleDateFormat("yyyyMMdd");
Stringymd=sdf.format(newDate());
savePath+=ymd+"/";
saveUrl+=ymd+"/";
FiledirFile=newFile(savePath);
if(!dirFile.exists()){
dirFile.mkdirs();
}
//Struts2请求包装过滤器
MultiPartRequestWrapperwrapper=(MultiPartRequestWrapper)request;
//获得上传的文件名
StringfileName1=wrapper.getFileNames("upload")[0];
//获得文件过滤器
Filefile=wrapper.getFiles("upload")[0];
//检查文件大小
if(file.length()>maxSize){
out.println(getError("上传文件大小超过限制。"));
return;
}
//检查扩展名
StringfileExt1=fileName1.substring(fileName1.lastIndexOf(".")+1).toLowerCase();
//重构上传文件名
SimpleDateFormatdf1=newSimpleDateFormat("yyyyMMddHHmmss");
StringnewFileName1=df1.format(newDate())+"_"+newRandom().nextInt(1000)+"."+fileExt1;
byte[]buffer=newbyte[1024];
//获取文件输出流
FileOutputStreamfos=newFileOutputStream(savePath+newFileName1);
Stringurl=savePath+newFileName1;
out.println(url);
//获取内存中当前文件输入流
InputStreamin=newFileInputStream(file);
try{
intnum=0;
while((num=in.read(buffer))>0){
fos.write(buffer,0,num);
}
}catch(Exceptione){
e.printStackTrace(System.err);
}finally{
in.close();
fos.close();
}
%>
<%!
privateStringgetError(Stringmessage){
JSONObjectobj=newJSONObject();
obj.put("error",1);
obj.put("message",message);
returnobj.toJSONString();
}
%>
（4）有关kindeditor上传图片的jar包有如下所示
A.commons-fileupload-1.2.1.jar
B.commons-io-1.4.jar
C.json_simple-1.1.jar
这里没有用到有关于kindeditor的js代码，具体可参考：Kindeditor实现图片自动上传功能
（5）有关kindeditor上传图片预览的div如下
<divid="div2"> <ulclass="img-list"> <liid="wy"> <imgstyle="height:100%;width:100%;position:absolute;top:0px;"src="<%=request.getContextPath()%>/shequ/images/index.png;"> </li> </ul> </div>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。