AjaxFileUpload组件结合Struts2异步图片上传

使用AjaxFileUpload组件结合Struts2异步上传需要添加如下文件:

ajaxfileupload.js

jquery-x.x.x-min.js

struts2相关jar包

AjaxFileUpload组件下载连接:

具体实现代码:

服务端:

package com.tenghu.action.upload;import java.io.File;import java.io.FileInputStream;import java.io.FileOutputStream;import java.io.InputStream;import java.io.OutputStream;import javax.servlet.http.HttpServletRequest;import org.apache.struts2.ServletActionContext;import com.opensymphony.xwork2.ActionSupport;/** * 文件上传Action * @author xiaohu * */public class FileUpload extends ActionSupport{private String name;//封装上传文件域的属性private File file;//封装上传文件类型的属性private String fileContentType;//封装上传文件名的属性private String fileFileName;//提示信息private String json_message;private String JSON_MESSAGE="json_message";@Overridepublic String execute() throws Exception {try {//设置文件保存目录String saveDir=getRootPath()+"/images";File saveFile=new File(saveDir);//判断if(!saveFile.exists()){saveFile.mkdirs();}//时间戳String timeStr="zycs"+System.currentTimeMillis();//获取文件后缀String fileSuffix=fileFileName.substring(fileFileName.indexOf("."));//拼接文件名String fileName=timeStr+fileSuffix;//创建文件输出流对象OutputStream fos=new FileOutputStream(saveDir+"/"+fileName);//创建文件输入流对象InputStream fis=new FileInputStream(file);//创建缓冲数组byte[] buffer=new byte[1024];int len=0;//从输入流中将数据写入到输出流中while((len=fis.read(buffer))!=-1){//写入fos.write(buffer,0,len);}//关闭资源fis.close();fos.close();//上传成功地址String successPath=getUrl()+"/images/"+fileName;json_message="{\&;result\&;:1,\&;message\&;:\&;"+successPath+"\&;}";} catch (Exception e) {e.printStackTrace();json_message="{\&;result\&;:0}";}return JSON_MESSAGE;}/** * 返回服务器http地址 * @return */private String getUrl(){HttpServletRequest request=ServletActionContext.getRequest();return ""+request.getRemoteHost()+request.getContextPath();}/** * 获取项目根目录 * @return */private String getRootPath(){String filePath = Thread.currentThread().getContextClassLoader().getResource("").toString();if (filePath.toLowerCase().indexOf("file:") > -1) {filePath = filePath.substring(6, filePath.length());}if (filePath.toLowerCase().indexOf("classes") > -1) {filePath = filePath.replaceAll("/classes", "");}if (filePath.toLowerCase().indexOf("web-inf") > -1) {filePath = filePath.substring(0, filePath.length() – 9);}if (System.getProperty("os.name").toLowerCase().indexOf("window") < 0) {filePath = "/" + filePath;}if (filePath.endsWith("/"))filePath = filePath.substring(0, filePath.length() – 1);return filePath;}public String getName() {return name;}public void setName(String name) {this.name = name;}public File getFile() {return file;}public void setFile(File file) {this.file = file;}public String getFileContentType() {return fileContentType;}public String getJson_message() {return json_message;}public void setJson_message(String jsonMessage) {json_message = jsonMessage;}public void setFileContentType(String fileContentType) {this.fileContentType = fileContentType;}public String getFileFileName() {return fileFileName;}public void setFileFileName(String fileFileName) {this.fileFileName = fileFileName;}}如果希望获取到上传图片的宽和高,可以添加以下代码://获取图片缓冲流对象BufferedImage image=ImageIO.read(fis);image.getWidth();//图片宽image.getHeight();//图片高这里的fis表示:InputStream输入流,也可以直接传入File文件对象

js代码:

<script type="text/javascript">$(document).ready(function() {//调用初始化方法UPLOAD.init();});var UPLOAD = {wWidth : $(window).width(),//获取浏览器可视化宽度wHeight : $(window).height(),//获取浏览器可视化高度//初始化上传文件窗口的位置init : function() {//获取窗口div对象var uObj = $(".w_sub");//设置上传窗口位置uObj.css( {"left" : (this.wWidth – uObj.width()) / 2,"top" : (this.wHeight – uObj.height()) / 2});//点击上传按钮显示上传窗口$("#upload").click(function(){$("#upload_w").show();});//调用关闭窗口this.closeUp();//调用关闭预览窗口this.closePre();//调用上传函数this.btnUpload();//调用预览图片this.btnPreview();this.dragDrop();},//关闭上传窗口closeUp:function(){$(".close").click(function(){$("#upload_w").hide();});},//关闭预览窗口closePre:function(){$(".pre").click(function(){$(".preview_w").hide();});},//点击上传btnUpload:function(){$(".sub_upload").click(function(){var file=$("#file").val();if(file==""){alert("请选择需要上传的图片");return;}else{//判断上传文件格式var suffixs=new Array("jpg","gif","png");//截取上传文件格式var fileType=file.substring(file.lastIndexOf(‘.’)+1);if($.inArray(fileType,suffixs)<=-1){alert("图片格式错误");return;}else{varuploadUrl="uploadFile?time="+new Date().getTime();//异步上传$.ajaxFileUpload({url:uploadUrl,secureuri:false,fileElementId:"file",//上传id,,这里是<input type="file" name="file" id="file"/>dataType:’text’,success:function(data,status){var json=$.parseJSON(data);if(json.result==1){$("#upload_w").hide();$(".url").val(json.message);}else{alert("上传失败!");}},error:function(){alert("异步失败");}});}}});},//点击预览btnPreview:function(){//点击预览图片$("#proview_img").click(function(){//获取文本框中的路径var imagePath=$(".url").val();if(imagePath!=""){$("#image").attr("src",$(".url").val());$(".preview_w").show();}else{alert("还有上传图片");}});},/***拖拽弹窗*/dragDrop:function(){var self=this;var move=false;//标识是否移动元素var offsetX=0;//弹窗到浏览器left的宽度var offsetY=0;//弹出到浏览器top的宽度var title=$(".title");boxContent=$(".preview");//鼠标按下事件title.mousedown(function(){move=true;//当鼠标按在该div上的时间将move属性设置为trueoffsetX=event.offsetX;//获取鼠标在当前窗口的相对偏移位置的Left值并赋值给offsetXoffsetY=event.offsetY;//获取鼠标在当前窗口的相对偏移位置的Top值并赋值给offsetYtitle.css({"cursor":"move"});}).mouseup(function(){//当鼠标松开的时候将move属性摄hi为falsemove=false;});$(document).mousemove(function(){if(!move){//如果move属性不为true,就不执行下面的代码return;}//move为true的时候执行下面代码var x = event.clientX-offsetX; //event.clientX得到鼠标相对于客户端正文区域的偏移,然后减去offsetX即得到当前推拽元素相对于当前窗口的X值(减去鼠标刚开始拖动的时候在当前窗口的偏移X)var y = event.clientY-offsetY; //event.clientY得到鼠标相对于客户端正文区域的偏移,然后减去offsetX即得到当前推拽元素相对于当前窗口的Y值(减去鼠标刚开始拖动的时候在当前窗口的偏移Y)if(!(x<0||y<0||x>(self.wWidth-boxContent.width())||y>(self.wHeight-boxContent.height()))){boxContent.css({"left":x,"top":y,"cursor":"move"});}});}}</script>这里使用的ajaxfileupload异步上传组件html代码:<body>上传后的文件路径:<input type="text" class="url" /><span id="upload">上传</span><span id="proview_img">预览</span><br/><!– 上传文件弹窗 –><div id="upload_w"><!– 遮盖部分 –><div class="cover"></div><div class="w_sub"><form action="" method="post" enctype="multipart/form-data"><table width="100%" cellpadding="0" cellspacing="0"><tr><th class="title">图片上传<span class="close">×</span></th></tr><tr><td style="padding-left: 20px">选择图片文件:<br /><input type="file"style="width: 95%; border: 1px solid #ddd; height: 25px; border-radius: 3px" name="file" id="file"></td></tr><tr><td>${promptInfo }</td></tr><tr height="50px"><td align="center"><input type="button" value="上传" class="sub_upload" /></td></tr></table></form></div></div><!– 预览图片窗口 –><div class="preview_w"><!– 遮盖部分 –><div class="cover"></div><div class="preview"><table width="100%" cellpadding="0" cellspacing="0"><tr><th class="title">图片预览<span class="pre">×</span></th></tr><tr><td style="padding: 20px"><img src="" id="image"/></td></tr></table></div></div></body>css代码:<style type="text/css">* {margin: 0px;padding: 0px;}body {font: normal 15px/ 30px ‘微软雅黑’}.url {width: 250px;height: 30px;border: 1px solid #CCCCCC;border-radius: 4px;}span {color: #999999;cursor: pointer;}span:hover {color: orange}/*上传文件弹窗效果*/#upload_w,.preview_w{display: none;}.cover {width: 100%;height: 100%;filter: alpha(opacity = 30);-moz-opacity: 0.3;-khtml-opacity: 0.3;opacity: 0.3;background: #CCCCCC;position: fixed;top: 0}.w_sub {height: 150px;width: 350px;border: 3px solid #2CB9F2;background: #FFFFFF;position: fixed;padding: 10px;}/*上传按钮*/.sub_upload {height: 30px;width: 70px;background-color:#0A86CB;border-right:2px solid #0879B9;border-bottom:2px solid #0879B9;color:#FFFFFF;}.close,.pre{color:#2CB9F2;color:#0879B9;font-size: 25px;float: right;margin-right: 8px;line-height: 25px;cursor: pointer;}.preview{position: fixed;padding: 10px;border: 3px solid #2CB9F2;background:#FFFFFF;top:100px;left:100px;}table{border:1px solid #2CB9F2}.title{ height:35px; background-color: #D6DEE3; font:normal 15px ‘微软雅黑’; text-align: left; padding-left: 10px; color:#4C5A5F;}</style>需要引入js文件:<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><script type="text/javascript" src="js/ajaxfileupload.js"></script>实现效果:

初始化界面:

如果你不出去走走,你就会以为这就是世界。

AjaxFileUpload组件结合Struts2异步图片上传

相关文章:

你感兴趣的文章:

标签云: