———————-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');
-
}
- 20
———————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>
- 1
- 2
—————————-后台代码———————————————————-
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();
-
}
-
}
- 1
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());
-
}