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

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

ajaxfileupload.js

jquery-x.x.x-min.js

struts2相关jar包

AjaxFileUpload组件下载连接：http://download.csdn.net/detail/yangfuqian/4337967

具体实现代码：

服务端：

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 "http://"+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{var    uploadUrl="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异步图片上传相关推荐

php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
php js实现异步图片上传,使用php+js异步上传图片
HTML语言如下,隐藏文件文本框,写一个button按钮,通过点击该按钮来弹出选择图片对话框: JS语言如下,主要用ajaxfileupload.js来传送图片文件信息到后端给PHP处理,然后接收PH ...
jquery php 异步图片上传实例,php结合jquery异步上传图片（ajaxSubmit）
Ajax异步上传图片 functionsky_upfiles(){varmesstxt; $("#sky_upform").ajaxSubmit({//dataType:'scri ...
原生JS实现异步图片上传（预览）
效果实现过程分为两步 1. 用户点击添加后通过 H5文件读取 FileReader对象以DataURL的格式读取图片 2. 通过FormData对象生成表单数据,通过ajax上传到后台 HTML & ...
django 类取消csrf_Django之Form组件详解、图片上传及定制
Django的Form功能生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 Django form 流程 1.创建类,继承form.Form ...
ssm使用Ajax的formData进行异步图片上传返回图片路径，并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单<form id= "uploadForm" enctype="multipart/ ...
vant 组件库中的图片上传组件（多张图片上传，删除图片传自定义参数）
html部分 js部分图片上传前,限制图片格式.图片上传后,上传七牛云接口返回图片url,赋值给图片路径变量. 图片删除坑:vant上传组建中内置的删除事件,默认携带两个参数,file和detai ...
php+js实现异步图片上传,JavaScript实现异步图像上传功能
当向服务器上传图像时,根据服务器操作的复杂性和服务器性能,需要几秒钟到几分钟的时间来完成.本文的重点是在图像上传至服务器时使用JavaScript立即显示图像. 介绍当使用JavaScript将图像 ...
antd 的upload组件结合oss实现图片上传
多张图片列表上传 1.视图 <div style="display:flex;" class="clearfix"><span>添加图片 ...

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

AjaxFileUpload组件结合Struts2异步图片上传相关推荐

最新文章

热门文章