layui + stryts2 的图片上传，回显，预览放大

因为新公司需要用到 ssh框架（struts2+spring+hibernate）,页面用的layui ，所以这里就记录一下图片上传功能

1：页面代码：=========================================

2：js代码：=============================================

layui.use([ 'jquery','layer','upload' ], function() {

var $ = layui.jquery,
layer = layui.layer,
upload = layui.upload;

});

</script>

3:action的代码（就是controller）：=============================================

/***
* fileFileName 和 file 是直接写到类里面当作属性来用，要有get,set方法
*/

private String fileFileName; //struts2用来封装该文件域对应的文件的文件名,xxxFileName,layui上传的文件域field默认值是file
private File file; //struts2用来封装页面文件域对应的文件内容xxx

public String getFileFileName() {
return fileFileName;
}

public void setFileFileName(String fileFileName) {
this.fileFileName = fileFileName;
}

public File getFile() {
return file;
}

public void setFile(File file) {
this.file = file;
}

/***
* 图片上传
*/
public String uploadImage(){

String imagepath = imagepath();//获取保存路径
File files = new File(imagepath);
if(!files.isDirectory() && !files.exists()) {
files.mkdirs();
}
/**页面控件的文件流**/
String fileOriginalName="";
InputStream inStream=null;
String suffix ="";
String newFileName = fileFileName;
try {
/**获取文件夹下所有文件名**/
File[] oldFiles = files.listFiles();
int iFileCout=0;
boolean bFileFlag = false;
fileOriginalName=fileFileName.substring(0, fileFileName.lastIndexOf(".")); //获取文件名
suffix = fileFileName.substring(fileFileName.lastIndexOf(".")); //获取文件后缀
while(!bFileFlag){
bFileFlag = true;
for(int i=0; i<oldFiles.length; i++){
if(oldFiles[i].isFile()){
if(oldFiles[i].getName().equals(newFileName)){
newFileName = fileOriginalName+"_"+iFileCout+suffix; //在文件名末尾用"_"+自增数字来防止重名文件覆盖,也可以使用时间戳等重命名
bFileFlag = false;
iFileCout++;
break;
}
}
}
}
inStream=new FileInputStream(file);
String fileName=imagepath+File.separator+newFileName; //File.separator代替分隔符, 防止linux和windows环境不同
FileOutputStream fs = new FileOutputStream(fileName);
int byteread = 0;
byte[] buffer = new byte[1024];
while ( (byteread = inStream.read(buffer)) != -1) {
fs.write(buffer, 0, byteread);
}
fs.close(); //注意关闭流
inStream.close();
if(fileName!=null && !"".equals(fileName)){
Map<String,Object> resultMap=new HashMap<String,Object>();
resultMap.put("urlimg", fileName); //上传一个文件后返回的数据
resultMap.put("newurlimg", newFileName); //上传一个文件后返回的数据
this.jsonObject=new ResultBean<Object>(resultMap).convertJsonObj();
}
} catch (Exception e) {
e.printStackTrace();
this.jsonObject = new ResultBean<Object>(e).convertJsonObj();
}
logger.info("Out AfterSalesServiceAction::updateErrorRecording() . . .");
return SUCCESS;
}

/*
* 获取图片保存路径
*/
private String imagepath(){

String realPath = request.getServletContext().getRealPath("/") ;
String[] split = realPath.split("webapps");
if(split.length==2){
realPath = split[0]+"HEM/images";
}
return realPath;
}

4:需要在tomcat的server.xml文件里面配置一行代码：==============================

其中 path 是你在项目里面写的虚拟路径，docBase是图片保存的真实的绝对路路径

最后：总结一下，关于页面的样式可以根据自己需求来适当修改，就可以直接使用了，亲测过。有什么问题可以及时留言。

附几张图片：

layui + stryts2 的 图片上传，回显，预览放大

layui + stryts2 的图片上传，回显，预览放大