使用webuploader批量上传图片
在一个网站中图片上传通畅是一个非常常用的功能。不论是头像的展示亦或是作品的展示，都离不开此功能。
在我的所做的一个招聘网站的项目中，求职者有一个上传作品的功能。如果一张一张上传图片的话，非常繁琐，用户体验也不好。所以我们用到了webuploader来做图片批量上传的功能。以下是代码。
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=\'#\'" /jobSoo/startSet1.js"></script> <script src=\'#\'" /jobSoo/webuploader.js"></script>
在此要引入所用到的js文件。切莫忘记！
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');
}
以下是java代码片段：
/**
* 用户作品展示/企业风采上传
* @param files 上传的文件
* @param destDir 目标文件夹
* @param request 请求
*/
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("/");
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);
//更新个人简历静态页面freemark - zzj
CreateStaticResource resource = new CreateStaticResourceImpl();
resource.createResumeHtmlHasTel(resume, request);
}else if(user.getUserType() == 1){ //企业风采上传
//更新企业详情静态页面freemark - zzj
Company company = companyDao.findCompanyByUserId(user.getId());
createCompanyIndexHtml(company, request);
}
} catch (Exception e) {
throw e;
}
}
/**
* 为文件重新命名，命名规则为当前系统时间毫秒数
* @return string
*/
private String getFileNameNew() {
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS");
return fmt.format(new Date());
}
里面部分代码可能涉及到具体的业务，但是没有关系，总体的流程就是这么个流程。希望对大家有所帮助。