您的位置：首页 > Web前端 > JQuery

JQuery特效多张图片上传

2016-08-03 21:00 316 查看

freemarker

<!DOCTYPE html>
<html lang="zh-cn" class="hb-loaded">
<head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script>
<script src="js/uplo.js"></script>
<script>
$(function () {
//var btn = $("#Button1");

var btn = $("#Button1").uploadFile({
url: "uploadMulPic.action",
fileSuffixs: ["jpg", "png", "gif", "txt","jpeg"],
maximumFilesUpload: 8,//最大文件上传数
onComplete: function (msg) {
$("#testdiv").append(msg + "<br/>");
},
onAllComplete: function () {
alert("全部上传完成");
},
isGetFileSize: true,//是否获取上传文件大小，设置此项为true时，将在onChosen回调中返回文件fileSize和获取大小时的错误提示文本errorText
onChosen: function (file, obj, fileSize, errorText) {
if (!errorText) {
$("#file_size").text(file + "文件大小为：" + fileSize + "KB");
} else {
alert(errorText);
return false;
}
return true;//返回false将取消当前选择的文件
},
perviewElementId: "fileList", //设置预览图片的元素id
perviewImgStyle: { width: '76px', height: '58px', border: '1px solid #ebebeb' }//设置预览图片的样式
});

var upload = btn.data("uploadFileData");

$("#files").click(function () {
upload.submitUpload();
});
});
</script>

</head>
<body>

<div style="width: 500px; height: auto;">

<input id="Button1" type="button" value="选择文件" multiple/>
<input id="files" type="button" value="上传" submitPic();/>

<div id="fileList" style="margin-top: 10px; padding-top:10px; font-size: 13px; width:400px">

</div>

</div>
<br/>

<div id="file_size" style="width: 400px; border-bottom: 1px solid #C0C0C0;"></div>
<br/>
</body>

</html>

Controller
@RequestMapping(value="uploadMulPic",method = RequestMethod.POST)
@ResponseBody
public String uploadMulPic(HttpServletRequest request) throws Exception {
MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
MultipartFile file = null;
MultiValueMap<String, MultipartFile> multiFileMap = multipartRequest.getMultiFileMap();
List<String> uploadUrl = uploadService.uploadMulFile(multiFileMap, request);
return "{\"filePath\":\""+uploadUrl+"\"}";
}

Service
/**
* 上传多个文件
* @param file 文件
* @param folder 文件夹名称
* @param request
* @return
* @throws IOException
*/
public List<String> uploadMulFile(MultiValueMap<String, MultipartFile> multiFileMap, HttpServletRequest request) throws IOException {
List<String> paths = new ArrayList<>();
for (String key : multiFileMap.keySet()) {
List<MultipartFile> MultipartFiles = multiFileMap.get(key);
for(MultipartFile file :MultipartFiles){
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd");
String rootPath = request.getRealPath("/");
String prefix = uploadUrlsConfigurer.getContextProperty(request);
String datePath = format.format(new Date());
String appPath = prefix+"/"+datePath;
FileUtils.createFilePath(request.getRealPath("/"), appPath);
String fileName = Identities.uuid2() + file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf("."));
/*
* /upload/other/2015-04-15/cea78319e0ea4756b29de05b2cc431ab.pdf
* */
FileCopyUtils.copy(file.getBytes(), new File(request.getRealPath("/") + appPath+"/"+fileName));
paths.add("/" + appPath+"/"+fileName);
}
}

return paths;
}

会访问多次Controller，对于商品保存存在问题。

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

标签：

相关文章推荐

新的分享

章节导航