今天遇到了个麻烦事,毕设中的一个表单需要上传图片,想要达到先选中预览再上传的效果,
刚开始想的是用javascript的方法 现在本地预览,也就是获取<input />的值再去显示,无奈的是input的值在某些浏览器中才能拿到,
某些不行,原因是很多浏览器因为安全的原因禁止input获取本地的路径,好吧,那就只有一个办法了,那就是先上传到服务器再显示出来。下面就是过程
根目录下建立 pictemp目录,先将图片上传到这个临时目录,显示后,提交的话就保存否则舍弃。
Struts 中的文件上传很方便
需要的包commons-fileupload-1.2.1.jar 和 commons-io.jar
页面的结构:
<script>
function sm()
{
document.getElementsByTagName('form')[0].submit();
}
</script>
</head>
<body>
<div style="width:160px; height:160px; border:1px solid #CCC; padding:5px;">
<img width="160px" src="${pageContext.request.contextPath }/pictemp/<%=request.getAttribute("savedName")%>" />
</div>
<form method="post" action="${pageContext.request.contextPath }/test/upload.action" enctype="multipart/form-data">
选择图片:
<input type=file name=upload style="display: none;" οnchange="sm()" accept="image"/>
<input type=button value="File" οnclick=upload.click() style="border: 1px solid green">
</form>
</body>
第二个input调用隐藏的第一个input 目的是 统一input的样式,以免不同的浏览器中看到的效果不一样。
这里设置了input的值改变的话就会自动提交,服务器端保存后结果再返回这个页面,将其中的img显示出来。
Struts 的 配置:
<action name="upload" class="uploadAction">
<param name="savePath">/pictemp</param>
<result name="success">/Manage/caidan_manage/Upload.jsp</result>
</action>
这里的param 设置action中将要保存的临时文件夹的地址。
action 的class是spring 根据action上的注释得到的,所以不是完整的路径
Action 写法:
package cn.soft.action;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import org.apache.commons.io.filefilter.SuffixFileFilter;
import org.apache.struts2.ServletActionContext;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import cn.soft.util.UUIDGenerator;
@Controller @Scope("prototype")
public class UploadAction {
private File upload;//封装上传文件
private String uploadFileName;//设置上传文件的文件名
private String uploadContentType;//上传文件的类型
private String savePath;//上传文件的保存路径
private String savedName;//保存的文件名
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getSavePath() {
System.out.println(ServletActionContext.getServletContext().getRealPath(savePath));
return ServletActionContext.getServletContext().getRealPath(savePath);
}
public void setSavePath(String savePath) {
this.savePath = savePath;
System.out.println("savePath: "+savePath);
}
public String getSavedName() {
return savedName;
}
public void setSavedName(String savedName) {
this.savedName = savedName;
}
public String execute()throws Exception{
String name=UUIDGenerator.getUUID();//得到uuid
String[] strs=getUploadFileName().split("\\.");
name+="."+strs[strs.length-1];//得到以uuid为名,原后缀为后缀的新文件名
FileOutputStream fos=new FileOutputStream(getSavePath()+"\\"+name);
FileInputStream fis=new FileInputStream(getUpload());
byte[] buffer=new byte[1024];
int len=0;
while((len=fis.read(buffer))>0){
fos.write(buffer, 0, len);
}
setSavedName(name);//设置返回页中的图片路径
return "success";//返回到upload.jsp
}
}