webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
2017-06-21 09:37
896 查看
———————-css—————————-
[/code]
———————-js—————————-
1.自行下载webuploader.js
———————html———————————————-
2
—————————-后台代码———————————————————-
Controller层
Service层
/*添加图片按钮*/ .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); }
[/code]
———————-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()); }
相关文章推荐
- webuploader+springmvc实现多文件上传(html+js+css原创,后台代码借鉴)
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- WebUploader+SpringMVC实现文件上传功能
- Java与WebUploader相结合实现文件上传功能(实例代码)
- springMvc+swfUpload实现异步文件上传(前台用纯html后台返回json)
- 【原创】Ext 上传文件,前后台实现, Asp.net 代码
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- 【原创】MVC +WebUploader 实现分片上传大文件
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- js实现文件上传,图片本地预览(部分代码是借鉴的)
- resumable.js —— 基于 HTML 5 File API 的文件上传组件 支持续传后台c#实现
- 使用CGIC实现Web文件上传的服务端代码
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- asp.net后台代码动态引用添加JS和css文件
- jsbeautifier + JScript.NET/JavaScript 编程实现 JavaScript、HTML、CSS 代码格式化脚本命令行工具 并集成到 EditPlus
- html css js 实现Tab标签页示例代码
- HTML5+Springmvc实现拖拽文件上传