您的位置：首页 > 编程语言 > Java开发

springmvc上传多图片

2015-10-30 15:57 489 查看

1:首先下载uploadPreview.js

2:页面：

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html lang="en">
<head>

</head>
<style>
#uploadImg ul{
list-style: none;
}

#uploadImg li{
float: left;
}

#divupload {
text-align: center;
}

</style>
<script src="static/js/uploadPreview.js" type="text/javascript"></script>
<script type="text/javascript">
function yulan(upimg,imgdiv,imgshow){
new uploadPreview({
UpBtn: upimg,
DivShow: imgdiv,
ImgShow: imgshow,
callback:function(){
document.getElementById(imgshow).style.width="auto";
document.getElementById(imgshow).style.height="auto";
alert(document.getElementById(imgshow));
/* setTimeout(function(){
document.getElementById("widthtext").value=document.getElementById(imgshow).offsetWidth;
document.getElementById("heightext").value=document.getElementById(imgshow).offsetHeight;
},100); */
setTimeout(function(){
document.getElementById(imgshow).style.width="100px";
document.getElementById(imgshow).style.height="100px";
},200);

}
});

}

function getUpload(index,obj){
yulan("up_img"+index,"imgdiv"+index,"imgShow"+index);
}

function addImg(){
var index = $("#index").val();
index++;
var content = "<li><div id='imgdiv"+index+" cf' style='border: 0px solid #ccc;'><img id='imgShow"+index+"' name='picture' src='static/img/default.png'"+
"class='fl' style='width: 100px; height: 100px;' /></div><input type='file' id='up_img"+index+"' name='myfiles' autocomplete='off' onchange='getUpload("+index+")'/></li>";
$("#uploadImg ul:eq(0)").append(content);
$("#index").val(index);
}

function add(){

  $("#form1").submit();

}
</script>

<body>

<input type="hidden" id="index" name="index" value="1"/>

<form id="form1" action="*.do">
<div id="uploadImg">

<ul>
<li>
<div id="imgdiv1 cf" style="border: 0px solid #ccc;"><img id="imgShow1" src="static/img/default.png" name="picture" class="fl" style="width: 100px; height: 100px;"/></div>
<input type="file" id="up_img1" name="myfiles" autocomplete="off" onchange="getUpload(1,this);"/>
</li>

</ul>

<ul>
<li><a class="btn btn-small btn-success" style="margin-top: 20px;" onclick="addImg();">添加</a> </li>
<li>  <a class="btn btn-small btn-success" style="margin-top: 20px;" onclick="ajaxFileUpload();">上传</a></li>
</ul>
</div>

</form>
</body>

</html>

4:上传的方法

  public class UploadUtil {

/**
*
* @Title: fileUp
* @Description:
* @param @param file 文件对象
* @param @param filePath 上传路径
* @param @param fileName 文件名(去掉前缀)
* @param @return 文件名
* @return String 返回类型
* @throws
*/
public static String fileUp(MultipartFile file, String filePath, String fileName){
String extName = ""; // 扩展名格式：
try {
if (file.getOriginalFilename().lastIndexOf(".") >= 0){
extName = System.currentTimeMillis()+"";
}
copyFile(file.getInputStream(), filePath, extName+fileName).replaceAll("-", "");
} catch (IOException e) {
System.out.println(e);
}
return extName+fileName;
}
/**
* 写文件到当前目录的upload目录中
*
* @param in
* @param fileName
* @throws IOException
*/
private static String copyFile(InputStream in, String dir, String realName)
throws IOException {
File file = new File(dir, realName);
if (!file.exists()) {
if (!file.getParentFile().exists()) {
file.getParentFile().mkdirs();
}
file.createNewFile();
}
FileUtils.copyInputStreamToFile(in, file);
return realName;
}

}

4:后台

@RequestMapping(value="*")
public String saveupload(HttpServletRequest request,
@RequestParam MultipartFile[] myfiles){

//调用fileUp方法即可完成上传操作

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： springmvc上传多图片

相关文章推荐

新的分享

章节导航