jsp页面：
粉紫色区域实现了图片上传以后立刻回显。当选择图片以后，点击系统自带的打开按钮，就实现了文件上传和回显。
因为要传每张图片的id和url到后台，所以在jsp中用name属性规定一个了名字，如下边绿色区域。
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<section class="Hui-article-box section_box">
<form id="commit" action="<%=request.getContextPath()%>/turnimghome/updateMipCarouselList.do?PositionId=<%=request.getParameter("carouselPositionId")%>" method="post">
<div class="row cl ml-30 add">
<div class="turnImgWrap col-sm-9 ml-10" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 text-c">
<div class="img">
<span class="addimg">+</span>
<input type="hidden" name="pictureId"/>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-6">
<p class="lianjie">链接：<input type="text" class="int-text" name="url" placeholder="请输入链接" ></p>
<!-- <p class="mt-30">标题：<input type="text" class="int-text" placeholder="请输入标题"></p> -->
</div>
<div style="clear: both"></div>
<button class="btn btn-danger-outline delAll"><i class="Hui-iconfont"></i>删除</button>
</div>
<c:forEach items="${mipCarousel}" var="cas" varStatus="status">
<div class="turnImgWrap col-sm-9 ml-10" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 text-c">
<div class="img">
<span><img src="${cas.id}"></span>
<input type="hidden" name="pictureId" value="${cas.pictureid}">
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-6">
<p class="lianjie">链接：<input type="text" class="int-text" name="url" placeholder="请输入链接" value="${cas.url}"></p>
<!-- <p class='mt-30'>标题：<input type="text" class="int-text" placeholder="请输入标题"></p> -->
</div>
<div style="clear: both"></div>
<button class="btn btn-danger-outline delAll"><i class="Hui-iconfont"></i>删除</button>
</div>
</c:forEach>
</div>
<div class="ml-30 mt-30">
<button class="btn btn-danger ml-30" id="addNew">新增</button>
<input type="submit" class="btn btn-success ml-30" id="submit" value="提交">
</div>
</form>
<form id="upload" style="position:absolute;z-index:-1;opacity:0;">
<input id="file" type="file" name="file">
</form>
</section>
<script type="text/javascript">
//不允许都删除，至少上传一张图片
$(function(){
$("#submit").click(function(){
if($("#commit").serialize().length==0){
layer.msg('[ERROR]至少得有一张图片', {icon: 2});
return false;
}
});
});
//点击新增按钮
$("#addNew").on("click",function(){
$(".add").append('<div class="turnImgWrap col-sm-9 ml-10" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)"> ' +
' <div class="col-xs-12 col-sm-6 col-md-5 col-lg-4 text-c">' +
'<div class="img">'+
'<span>+</span>' +
'<input type="hidden" name="pictureId"/>'+
'</div>' +
'</div>' +
' <div class="col-xs-12 col-sm-6 col-md-7 col-lg-6">' +
'<p class="lianjie">链接：<input type="text" class="int-text" name="url" placeholder="请输入链接"></p>' +
// '<p class="mt-30">标题：<input type="text" class="int-text"></p>' +
'</div>' +
'<div style="clear: both"></div>' +
'<button class="btn btn-danger-outline delAll" id="del"><i class="Hui-iconfont"></i>删除</button>' +
'</div>'
);
return false;
});
//点击删除按钮
$(".add").delegate("button","click",function(){
$(this).parent(".turnImgWrap").remove();
});
//进行拖拽
function allowDrop(ev)
{
ev.preventDefault();
}
var srcdiv = null;
function drag(ev,divdom)
{
srcdiv=divdom;
ev.dataTransfer.setData("text/html",divdom.innerHTML);
}
function drop(ev,divdom)
{
ev.preventDefault();
if(srcdiv != divdom){
srcdiv.innerHTML = divdom.innerHTML;
divdom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
var that;
$(".add").delegate(".img","click",function(){
that=$(this);
$("#file").click();
return false;
});
//图片上传并回显
$("#file").change(function(){
var formData = new FormData($("#upload")[0]);
$.ajax({
url : "<%=request.getContextPath() %>/file/uploadPicture.do?typeId=10&objectId=",
type : "post",
data : formData,
dataType:"json",
async: false,
cache: false,
contentType: false,
processData: false,
success: function(data){
$(that).find("span").html("<img src="+data.url+">");
$(that).find("input").val(data.picId);//.attr("name","'+data.picId+'")
// var a=$(that).next("input[name='file']")[0].files[0];//$("input[name='file']")[0].files[0];
// var b = new FileReader();
// b.readAsDataURL(a);
// b.onload=function(){
/* $("input[name='pictureId']")[0].value=data.picId; */
// }
layer.msg('[OK]上传成功', {icon: 1});
}
});
});
</script>
</body>
</html>
后台接收多条id和url时，要用String[]
/**
*提交上传的图片
* @throws IOException
*/
@RequestMapping("updateMipCarouselList")
@AuthPassport(authority="common")
public String updateMipCarouselList(@RequestParam String PositionId,@RequestParam("pictureId") String[] pictureId,@RequestParam("url") String[] url) throws MyException, IOException{
//清空表中相关数据
String sql = "delete from mip_carousel where carousel_position_id ='"+PositionId+"' and status = 1";
carouselService.deleteBySql(sql);
MipCarousel carousel = new MipCarousel();
//排除前台传来的数组中有空值
List<String> picList = new ArrayList<String>();
List<String> urlList = new ArrayList<String>();
for(int j=0;j< pictureId.length;j++){
if(pictureId[j]!=null && pictureId[j].length()!=0){
picList.add(pictureId[j]);
urlList.add(url[j]);
}
}
//插入前台提交数据
if(picList.size() > 0){
int size = picList.size();
for(int i =0;i<size;i++){
carousel.setPictureid(picList.get(i));
if(urlList.get(i) != null&& urlList.get(i).length()!=0)
carousel.setUrl(urlList.get(i));
else
carousel.setUrl(" ");
carousel.setSequence(size-i);
carousel.setCarouselPositionId(PositionId);
carousel.setTitle(" ");
User user = userService.get(Tools.getUser().getId());
carousel.setUid(user.getId());
carousel.setStatus((byte) 1);;
carouselService.save(carousel);
//更改picture表的id
String sqlByurl = "from Picture where id = '"+picList.get(i)+"' and status = 1";
Picture picture = pictureService.getUrl(sqlByurl);
//生成缩略图640x360
// 获取新主图存放路径
String urlslt = picture.getUrl();
String rootPath = config.getRootPath();
String imagePath = rootPath + urlslt;
// 设置缩略图的存放路径路径
int lastIndexOf = urlslt.lastIndexOf("/");
String substring = urlslt.substring(0, lastIndexOf);
String imageName = urlslt.substring(lastIndexOf + 1);
// 轮播图详情页大图C1（1200*453）
String thumbUrl1 = substring + "/640x360_" + imageName;
String thumbnailPath1 = rootPath + thumbUrl1;
// 生成缩略图
Map<String, Integer> thumb1 = ImageHepler.createThumbs(imagePath, thumbnailPath1, 640, 360);
picture.setThumb1(thumbUrl1);
picture.setThumb1Width(thumb1.get("width"));
picture.setThumb1Height(thumb1.get("height"));
picture.setObjectId(picList.get(i));
pictureService.update(picture);
}
}
return "redirect:/turnimghome/getMipCarouselList.do?carouselPositionId="+PositionId;
}
上传文件代码如下：
@RequestMapping(value = "/file/uploadPicture.do")
@ResponseBody
public String uploadPicture(@RequestParam(value = "file", required = false) CommonsMultipartFile file,
String objectId, String typeId, @RequestParam(defaultValue = "") String callBack, String property,
HttpServletRequest request) {
String result = "";
String realFileName = file.getOriginalFilename();
// String destDir = Tools.getServicePath(request);
String destDir = config.getRootPath();
String saveUrl = "";
String suffix = realFileName.substring(realFileName.lastIndexOf(".") + 1).toUpperCase();
JSONObject obj = new JSONObject();
/**
* 文件大小拦截，不能超过20M
*/
if (file.getSize() > 20 * 1024 * 1024 * config.getFileSize()) {
obj.put("error", 1);
result = "[ERROR]文件超过最大限制，请上传小于" + (20 * config.getFileSize()) + "M的文件";
} else if (config.getImageType().indexOf(suffix) < 0 && config.getFileType().indexOf(suffix) < 0) {
// 检查扩展名
obj.put("error", 1);
result = "[ERROR]上传文件格式不对";
} else {
// 检查扩展名
if (config.getImageType().indexOf(suffix) >= 0) {
saveUrl += "back/picture";
} else {
saveUrl += "back/picture";
}
String targetFileName = UUID.randomUUID().toString().replace("-", "") + "." + suffix;
// 保存图片
try {
if (!new File(destDir + saveUrl).exists()) {
new File(destDir + saveUrl).mkdirs();
}
File targetFile = new File(destDir + saveUrl, targetFileName);
file.transferTo(targetFile);
Picture picture = new Picture();
// 存数据库
picture.setObjectId(objectId);
picture.setTypeId(typeId);
picture.setName(realFileName);
picture.setUrl(saveUrl + "/" + targetFileName);
picture.setType((byte) 1);
picture.setStatus((byte) 1);
picture.setIsMain((byte) 1);
// 获取原图真实长宽
BufferedImage sourceImg = ImageIO.read(new FileInputStream(targetFile));
picture.setPicWidth(sourceImg.getWidth());
picture.setPicHeight(sourceImg.getHeight());
Picture savePic = pictureService.save(picture);
String picId = savePic.getId();
String picName = savePic.getName();
result = config.getRootUrl() + saveUrl + "/" + targetFileName;
obj.put("error", 0);
obj.put("state", "SUCCESS");
obj.put("url", result);
obj.put("picId", picId);
obj.put("picName", picName);
} catch (Exception e) {
obj.put("error", 1);
e.printStackTrace();
result = "[ERROR]上传失败";
}
}
if (!callBack.equals("")) {
if (result.indexOf("[ERROR]") < 0) {
// printMsg("<script>parent." + callBack + "('[OK]上传成功','" + result + "','" + property + "')</script>");
} else {
// printMsg("<script>parent.uploadImgCallBack('[ERROR]上传失败','" + result + "')</script>");
}
} else {
obj.put("message", result);
// printMsg(obj.toString());
}
return obj.toString();
}
