webuploader+springmvc实现多文件上传（html+js+css原创，后台代码借鉴）

———————-css—————————-

/*添加图片按钮*/
.add_resume_item {
cursor: pointer;
}
/*遮罩层*/
.zpzs_gray {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.6;
filter: alpha(opacity=60);
display: none;
z-index: 100;
}
/*弹出框*/
#uploader {
display: none;
height: 414px;
width: 830px;
position: fixed;
margin-top: -207px;
margin-left: -415px;
top: 50%;
left: 50%;
background-color: #fff;
border: 1px solid #ddd;
z-index: 101;
}
/*弹出框头部*/
#uploader .add_img_head {
height: 44px;
font-size: 12px;
background-color: #ff8400;
position: relative;
color: #fff;
}
#uploader .add_img_head span {
background: url("../images/imgHead_grzp.png") 0 0 no-repeat;
position: absolute;
display: block;
top: 12px;
left: 5px;
width: 180px;
height: 20px;
}
#uploader .add_img_head b {
background: url("../images/closeImg.png") 0 0 no-repeat;
position: absolute;
display: block;
top: 0;
right: 0;
width: 32px;
height: 21px;
cursor: pointer;
}
/*选择图片按钮*/
#uploader .add_img {
height: 150px;
width: 300px;
position: absolute;
margin-top: -75px;
margin-left: -150px;
top: 50%;
left: 50%;
}
#uploader .add_img p {
text-align: center;
color: #999;
font-size: 14px;
}
#uploader .add_img .uploadBtn {
display: none;
position: absolute;
right: 10px;
width: 118px;
height: 38px;
line-height: 38px;
top: 8px;
cursor: pointer;
text-align: center;
color: #fff;
background: url("../images/uploaderbtn.png") 0 0 no-repeat;
}
#uploader .add_img #filePicker {
height: 38px;
width: 128px;
text-align: center;
color: #fff;
line-height: 38px;
margin-left: 86px;
position: relative;
margin-bottom: 20px;
background: url("../images/chooseImg_grzp.png") 0 0 no-repeat;
}
#uploader .add_img #filePicker div {
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter: alpha(opacity=0);
}
#uploader .add_img #filePicker div.webuploader-pick {
opacity: 1;
filter: alpha(opacity=100);
color: #fff;
}
#uploader .add_img #filePicker input,
#uploader .add_img #filePicker label{
width: 100% !important;
height: 100% !important;
position: absolute;
top: 0;
left: 0;
}
#uploader #fileList {
padding-left: 20px;
}
/*单个缩略图容器*/
#uploader .file-item {
float: left;
width: 118px;
overflow: hidden;
border: 1px solid #969696;
height: 128px;
line-height: 128px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
position: relative;
}
#uploader .file-item img {
width: 100%;
vertical-align: middle;
}
#uploader .file-item .info {
position: absolute;
width: 100%;
height: 28px;
bottom: 0;
left: 0;
background-color: #ddd;
cursor: pointer;
line-height: 28px;
}
#uploader .file-item p.progress {
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 18px;
overflow: hidden;
z-index: 50;
margin: 0;
border-radius: 0;
background: #e8e8e8;
-webkit-box-shadow: 0 0 0;
}
#uploader .file-item p.progress span {
display: block;
overflow: hidden;
width: 0;
height: 100%;
background: #f4b887;
-webit-transition: width 200ms linear;
-moz-transition: width 200ms linear;
-o-transition: width 200ms linear;
-ms-transition: width 200ms linear;
transition: width 200ms linear;
-webkit-animation: progressmove 2s linear infinite;
-moz-animation: progressmove 2s linear infinite;
-o-animation: progressmove 2s linear infinite;
-ms-animation: progressmove 2s linear infinite;
animation: progressmove 2s linear infinite;
-webkit-transform: translateZ(0);
}

———————-js—————————-
1.自行下载webuploader.js

jQuery(function () {
var $ = jQuery,
//弹出上传框
$wrap = $('#uploader'),
//图片缩略图容器
$list = $('#fileList'),
//开始上传按钮
$upload = $wrap.find('.uploadBtn'),
//缩略图压缩程度
ratio = window.devicePixelRatio || 1,
//缩略图大小
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
//Web Uploader实例
uploader;
//初始化Web Uploader
uploader = WebUploader.create({
//自动上传。
auto: false,
//swf文件路径
swf: basePath + 'picture/Uploader.swf',
//文件接收服务端。
server: basePath + 'uploadPicture',
//选择文件的按钮。
pick: '#filePicker',
//单次上传最多图片数
fileNumLimit: 12,
//单个文件最大为2m
fileSingleSizeLimit: 2*1024*1024,
//允许选择的图片格式
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/*'
}
});
// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
//图片数目限制为12张
if ($('.file-item').length < 12) {
//创建新添加图片和删除条
var $li = $(
'<div id="' + file.id + '" class="file-item">' +
'<img>' +
'<div class="info">删除</div>' +
'</div>'
),
$info = $li.find('.info'),
$img = $li.find('img');
//将新添加图片放入缩略图容器
$list.append($li);
//为图片删除条添加单击删除事件
$info.on('click', function () {
//将图片移除上传序列
uploader.removeFile(file, true);
//将图片从缩略图容器删除
var $li = $('#' + file.id);
$li.off().remove();
$('#filePicker').children().css('display','');
if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
$('#filePicker').css('background', 'url("images/chooseImg_qyfc.png") 0 0 no-repeat');
} else {
$('#filePicker').css('background', 'url("images/chooseImg_grzp.png") 0 0 no-repeat');
}
});
// 创建缩略图
uploader.makeThumb(file, function (error, src) {
if (error) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
//添加图片完成后将添加按钮和上传按钮固定在弹出框底部
$('.add_img').css({
'left': '0',
'top': '350px',
'width': '100%',
'margin-top': '0',
'margin-left': '0',
'height': '60px',
'padding-top': '8px'
});
//为弹出框内元素更改样式和添加事件
$('.uploadBtn').css({'display': 'block'});
$('#filePicker').css({'margin-left': '540px'});
$('.add_img p').css({'display': 'none'});
if ($('.file-item').length >= 12) {
$('#filePicker').children().css('display', 'none');
if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
$('#filePicker').css('background', 'url("images/chooseImg_qyfcdis.png") 0 0 no-repeat');
} else {
$('#filePicker').css('background', 'url("images/chooseImg_grzpdis.png") 0 0 no-repeat');
}
}
}
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
var $li = $('#' + file.id),
$percent = $li.find('.progress span'),
$info = $li.find('.info');
// 避免重复创建
if (!$percent.length) {
$percent = $('<p class="progress"><span></span></p>')
.appendTo($li).find('span');
}
$info.css({display: 'none'});
$percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给info添加文字，标记上传成功。
uploader.on('uploadSuccess', function (file) {
var $li = $('#' + file.id), $info = $li.find('.info');
$li.off();
$info.off().text('上传成功!')
.css({color: 'green', display: 'block'});
});
// 文件上传失败，给info添加文字，标记上传失败。
uploader.on('uploadError', function (file) {
var $li = $('#' + file.id),
$info = $li.find('.info');
$info.off().text('上传失败!')
.css({color: 'red', display: 'block'});
});
// 上传成功或失败后删除进度条。
uploader.on('uploadComplete', function (file) {
$('#' + file.id).find('.progress').remove();
});
//单击开始上传按钮开始上传
$upload.on('click', function () {
if ($('#fileList').children().length) {
$('.uploadBtn').css('background', 'url("images/uploaderbtndis.png") 0 0 no-repeat');
if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
$('#filePicker').css('background', 'url("images/chooseImg_qyfcdis.png") 0 0 no-repeat');
} else {
$('#filePicker').css('background', 'url("images/chooseImg_grzpdis.png") 0 0 no-repeat');
}
$('#filePicker').children().css('display', 'none');
timer = setInterval(function () {
if ($upload.html() === '重新上传' || $upload.html() === '开始上传' || $upload.html() === '上传中...') {
$upload.html('上传中')
} else {
$upload.html($upload.html() + '.')
}
}, 500);
$('.info').html('等待上传..').off();
if ($upload.html() === '重新上传') {
uploader.retry();
} else {
uploader.upload();
}
}
});
//全部上传完成时触发关闭弹出层
uploader.on('uploadFinished', function () {
$('.uploadBtn').css('background', 'url("images/uploaderbtn.png") 0 0 no-repeat');
clearInterval(timer);
closeBtn();
});
//单击页面上的上传图片选项弹出上传框
$('.add_resume_item').click(function () {
$('.zpzs_gray,#uploader').css('display', 'block');
});
//单击上传框上叉号按钮添加关闭上传框
$('.closeBtn').click(closeBtn);
//关闭弹出窗
function closeBtn() {
//获取上传出错和未上传的图片
var allPic = $('#fileList').children().length,
inited = uploader.getFiles('inited').length,
error = uploader.getFiles('error').length,
queued = uploader.getFiles('queued').length;
//判断是否可以关闭窗口
if (error) {
$upload.html('重新上传');
if (window.confirm('您已上传成功' + (allPic - error) + '张，上传失败' + error + '张，可能由于网络原因上传失败，是否确认关闭窗口！')) {
closeuploader();
}
} else if (inited) {
$upload.html('开始上传');
if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
var text = '企业风采';
} else {
var text = '个人作品';
}
if (window.confirm('您还有'+text+'尚未上传!\r\r是否确认取消上传？')) {
closeuploader();
}
} else if (queued) {
if (window.confirm('您还有' + text + '等待上传!\r\r是否确认关闭窗口！')) {
closeuploader();
}
} else {
if (allPic) {
window.location.href = window.location.href;
}
closeuploader();
}
//关闭上传框窗口后恢复上传框初始状态
function closeuploader() {
//关闭上传框
$('.zpzs_gray,#uploader').css('display', 'none');
//移除所有缩略图并将图片移除上传序列
for (var i = 0; i < uploader.getFiles().length; i++) {
//将图片从上传序列移除
uploader.removeFile(uploader.getFiles()[i], true);
delete uploader.getFiles()[i];
//将图片从缩略图容器移除
var $li = $('#' + uploader.getFiles()[i].id);
$li.off().remove();
}
//恢复上传框内元素样式
$('#filePicker,.uploadBtn,.add_img p,.add_img').removeAttr("style");
if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') {
$('#filePicker').css('background', 'url("images/chooseImg_qyfc.png") 0 0 no-repeat');
} else {
$('#filePicker').css('background', 'url("images/chooseImg_grzp.png") 0 0 no-repeat');
}
$('#filePicker').children().removeAttr("style");
$upload.html('开始上传');
}
}
});
/**
* 显示文件上传弹层
* @return
*/
function showUploadFrame(){
$('.zpzs_gray,#uploader').css('display', 'block');
}

———————html———————————————-


<div class="zpzs_gray"></div>

<div id="uploader">

<div class="add_img_head">
<span></span>
<b class="closeBtn"></b>
</div>

<div id="fileList"></div>

<div class="add_img">
<div id="filePicker"></div>
<p>按住Ctrl可多选照片</p>
<p>单次上传最多12张(单张最大2M)</p>
<div class="uploadBtn">开始上传</div>
</div>
</div>

<script src="<%=basePath %>js/jobSoo/startSet1.js"></script>

—————————-后台代码———————————————————-

Controller层

@RequestMapping("uploadPicture")
@ResponseBody
public void uploads(@RequestParam("file")MultipartFile[] files, String destDir,
HttpServletRequest request,HttpServletResponse response) {
try {
userUploadPictureService.uploads(files, destDir, request,response);
} catch (Exception e) {
e.printStackTrace();
}
}

Service层

public void uploads(MultipartFile[] files, String destDir,
HttpServletRequest request,HttpServletResponse response) throws Exception {
User user = (User)request.getSession().getAttribute("user");
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
request.getServerPort() + path;
// 获取文件上传的真实路径
String uploadPath = request.getSession().getServletContext().getRealPath("/");
List<String> picPaths = new ArrayList<String>();
try {
fileNames = new String[files.length];
int index = 0;
//上传文件过程
for (MultipartFile file : files) {
String suffix=file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1);
int length = getAllowSuffix().indexOf(suffix);
if (length == -1) {
throw new Exception("请上传允许格式的文件");
}
destDir = "staticResource/user/picture/" + user.getId();
File destFile = new File(uploadPath + destDir);
if (!destFile.exists()) {
destFile.mkdirs();
}
String fileNameNew = getFileNameNew() + "." + suffix;//
File f = new File(destFile.getAbsoluteFile() + File.separator + fileNameNew);
//如果当前文件已经存在了，就跳过。
if(f.exists()){
continue;
}
file.transferTo(f);
f.createNewFile();
fileNames[index++] = basePath + destDir + fileNameNew;
}
//个人作品展示
if(user.getUserType() == 0){
Resume resume = resumeDao.findResumeByUserId(user.getId());
String resumeRank = resume.getResumeRank();
//若不存在，添加上“作品展示”，并更新
if(resumeRank.indexOf(":zpzs") == -1){
resumeRank = resumeRank+":zpzs";
resume.setResumeRank(resumeRank);
resumeDao.updateResume(resume);
}
request.getSession().setAttribute("user", user);
}
} catch (Exception e) {
throw e;
}
}
/**
* 为文件重新命名，命名规则为当前系统时间毫秒数
* @return string
*/
private String getFileNameNew() {
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS");
return fmt.format(new Date());
}

webuploader+springmvc实现多文件上传（html+js+css原创，后台代码借鉴）

猜你喜欢