在一个网站中图片上传通畅是一个非常常用的功能。不论是头像的展示亦或是作品的展示,都离不开此功能。
在我的所做的一个招聘网站的项目中,求职者有一个上传作品的功能。如果一张一张上传图片的话,非常繁琐,用户体验也不好。所以我们用到了webuploader来做图片批量上传的功能。以下是代码。
html代码片段:
按住Ctrl可多选照片
单次上传最多12张(单张最大2M)
开始上传
在此要引入所用到的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: 'p_w_picpath/*' } }); // 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { //图片数目限制为12张 if ($('.file-item').length < 12) { //创建新添加图片和删除条 var $li = $( '' + '' ), $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("p_w_picpaths/chooseImg_qyfc.png") 0 0 no-repeat'); } else { $('#filePicker').css('background', 'url("p_w_picpaths/chooseImg_grzp.png") 0 0 no-repeat'); } }); // 创建缩略图 uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('不能预览'); 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("p_w_picpaths/chooseImg_qyfcdis.png") 0 0 no-repeat'); } else { $('#filePicker').css('background', 'url("p_w_picpaths/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 = $('' + '
删除' + '') .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("p_w_picpaths/uploaderbtndis.png") 0 0 no-repeat'); if ($('#filePicker').attr('class') === 'qyfc_upload webuploader-container') { $('#filePicker').css('background', 'url("p_w_picpaths/chooseImg_qyfcdis.png") 0 0 no-repeat'); } else { $('#filePicker').css('background', 'url("p_w_picpaths/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("p_w_picpaths/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("p_w_picpaths/chooseImg_qyfc.png") 0 0 no-repeat'); } else { $('#filePicker').css('background', 'url("p_w_picpaths/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()); }
里面部分代码可能涉及到具体的业务,但是没有关系,总体的流程就是这么个流程。希望对大家有所帮助。