1、导入资源
2、JSP代码
<div class="page-container"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目名称：</label> <div class="formControls col-xs-8 col-sm-9"> <input type="text" class="input-text" value="${proName }" placeholder="" id="" name="proName" readonly="readonly"> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2">缩略图：</label> <div class="formControls col-xs-8 col-sm-9"> <div class="uploader-thum-container"> <div id="fileList" class="uploader-list"></div> <div id="filePicker">选择图片</div> <button id="btn-star" class="btn btn-default btn-uploadstar radius ml-10">开始上传</button> </div> </div> </div> <div class="row cl"> <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>项目发票上传：</label> <div class="formControls col-xs-8 col-sm-9"> <div class="uploader-list-container"> <div class="queueList"> <div id="dndArea" class="placeholder"> <div id="filePicker-2"></div> <p>或将照片拖到这里，单次最多可选300张</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div id="filePicker2"></div> <div class="uploadBtn">开始上传</div> </div> </div> </div> </div> </div> <div class="row cl"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2"> <button onClick="article_add('','invoiceVo/save?&projectId=${projectId}&invoiceScan=','10001');" class="btn btn-primary radius" type="button"> <i class="Hui-iconfont"></i> 保存 </button> </div> </div> </div>
3、Js代码
<script type="text/javascript"> var imagePath=null; function article_save() { alert("刷新父级的时候会自动关闭弹层。"); window.parent.location.reload(); } function article_add(title, url, w, h) { if(imagePath){ var index = layer.open({ type : 2, title : title, content : url+imagePath }); layer.full(index); }else{alert("没有上传图片，请先上传图片");} } $(function() { $('.skin-minimal input').iCheck({ checkboxClass : 'icheckbox-blue', radioClass : 'iradio-blue', increaseArea : '20%' }); $list = $("#fileList"), $btn = $("#btn-star"), state = "pending", uploader; var uploader = WebUploader.create({ auto : true, swf : 'lib/webuploader/0.1.5/Uploader.swf',// swf文件路径 // 文件接收服务端。 server : 'lib/webuploader/0.1.5/server/fileupload.php', // 文件接收服务端。 // 选择文件的按钮。可选。 // 内部根据当前运行是创建，可能是input元素，也可能是flash. pick : '#filePicker', // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ resize : false, // 只允许选择图片文件。 accept : { title : 'Images', extensions : 'gif,jpg,jpeg,bmp,png', mimeTypes : 'image/*' } }); // 当有文件被添加进队列的时候 uploader .on( 'fileQueued', function(file) { var $li = $('<div id="' + file.id + '" class="item">' + '<div class="pic-box"><img></div>' + '<div class="info">' + file.name + '</div>' + '<p class="state">等待上传...</p>' + '</div>'), $img = $li.find('img'); $list.append($li); // 创建缩略图 // 如果为非图片文件，可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb(file, function(error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }, thumbnailWidth, thumbnailHeight); }); // 文件上传过程中创建进度条实时显示。 uploader .on( 'uploadProgress', function(file, percentage) { var $li = $('#' + file.id), $percent = $li .find('.progress-box .sr-only'); // 避免重复创建 if (!$percent.length) { $percent = $( '<div class="progress-box"><span class="progress-bar radius"><span class="sr-only" style="width:0%"></span></span></div>') .appendTo($li).find('.sr-only'); } $li.find(".state").text("上传中"); $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功，给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function(file) { $('#' + file.id).addClass('upload-state-success') .find(".state").text("已上传"); }); // 文件上传失败，显示上传出错。 uploader.on('uploadError', function(file) { $('#' + file.id).addClass('upload-state-error').find(".state") .text("上传出错"); }); // 完成上传完了，成功或者失败，先删除进度条。 uploader.on('uploadComplete', function(file) { $('#' + file.id).find('.progress-box').fadeOut(); }); uploader.on('all', function(type) { if (type === 'startUpload') { state = 'uploading'; } else if (type === 'stopUpload') { state = 'paused'; } else if (type === 'uploadFinished') { state = 'done'; } if (state === 'uploading') { $btn.text('暂停上传'); } else { $btn.text('开始上传'); } }); $btn.on('click', function() { if (state === 'uploading') { uploader.stop(); } else { uploader.upload(); } }); }); (function($) { // 当domReady的时候开始初始化 $(function() { var $wrap = $('.uploader-list-container'), // 图片容器 $queue = $('<ul class="filelist"></ul>').appendTo( $wrap.find('.queueList')), // 状态栏，包括进度和控制按钮 $statusBar = $wrap.find('.statusBar'), // 文件总体选择信息。 $info = $statusBar.find('.info'), // 上传按钮 $upload = $wrap.find('.uploadBtn'), // 没选择文件之前的内容。 $placeHolder = $wrap.find('.placeholder'), $progress = $statusBar.find('.progress').hide(), // 添加的文件数量 fileCount = 0, // 添加的文件总大小 fileSize = 0, // 优化retina, 在retina下这个值是2 ratio = window.devicePixelRatio || 1, // 缩略图大小 thumbnailWidth = 110 * ratio, thumbnailHeight = 110 * ratio, // 可能有pedding, ready, uploading, confirm, done. state = 'pedding', // 所有文件的进度信息，key为file id percentages = {}, // 判断浏览器是否支持图片的base64 isSupportBase64 = (function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if (this.width != 1 || this.height != 1) { support = false; } } data.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; return support; })(), // 检测是否已经安装flash，检测flash的版本 flashVersion = (function() { var version; try { version = navigator.plugins['Shockwave Flash']; version = version.description; } catch (ex) { try { version = new ActiveXObject( 'ShockwaveFlash.ShockwaveFlash') .GetVariable('$version'); } catch (ex2) { version = '0.0'; } } version = version.match(/\d+/g); return parseFloat(version[0] + '.' + version[1], 10); })(), supportTransition = (function() { var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(), // WebUploader实例 uploader; if (!WebUploader.Uploader.support('flash') && WebUploader.browser.ie) { // flash 安装了但是版本过低。 if (flashVersion) { (function(container) { window['expressinstallcallback'] = function(state) { switch (state) { case 'Download.Cancelled': alert('您取消了更新！') break; case 'Download.Failed': alert('安装失败') break; default: alert('安装已成功，请刷新！'); break; } delete window['expressinstallcallback']; }; var swf = 'expressInstall.swf'; // insert flash object var html = '<object type="application/' + 'x-shockwave-flash" data="' + swf + '" '; if (WebUploader.browser.ie) { html += 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" '; } html += 'width="100%" height="100%" style="outline:0">' + '<param name="movie" value="' + swf + '" />' + '<param name="wmode" value="transparent" />' + '<param name="allowscriptaccess" value="always" />' + '</object>'; container.html(html); })($wrap); // 压根就没有安转。 } else { $wrap .html('<a href="http://pany: 励图高科<br/> *@author: 刘云生 *@version: v1.0 *@since: JDK 1.8.0_40 *@Date: 2017年4月13日 下午6:30:45 <br/> */ public class WebuploaderUtil { private String allowSuffix = "jpg,png,gif,jpeg";//允许文件格式 private long allowSize = 2L;//允许文件大小 private String fileName; private String[] fileNames; public String getAllowSuffix() { return allowSuffix; } public void setAllowSuffix(String allowSuffix) { this.allowSuffix = allowSuffix; } public long getAllowSize() { return allowSize*1024*1024; } public void setAllowSize(long allowSize) { this.allowSize = allowSize; } public String getFileName() { return fileName; } public void setFileName(String fileName) { this.fileName = fileName; } public String[] getFileNames() { return fileNames; } public void setFileNames(String[] fileNames) { this.fileNames = fileNames; } /** * * @Title: getFileNameNew * @Description: TODO * @param: @return * @return: String * @author: 刘云生 * @Date: 2017年4月14日 上午10:17:35 * @throws */ private String getFileNameNew(){ SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS"); return fmt.format(new Date()); } /** * * @Title: uploads * @Description: TODO * @param: @param files * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: 刘云生 * @Date: 2017年4月14日 上午10:17:14 * @throws */ public void uploads(MultipartFile[] files, String destDir,HttpServletRequest request) throws Exception { String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; 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("请上传允许格式的文件"); } if(file.getSize() > getAllowSize()){ throw new Exception("您上传的文件大小已经超出范围"); } String realPath = request.getSession().getServletContext().getRealPath("/"); File destFile = new File(realPath+destDir); if(!destFile.exists()){ destFile.mkdirs(); } String fileNameNew = getFileNameNew()+"."+suffix;// File f = new File(destFile.getAbsoluteFile()+"\\"+fileNameNew); file.transferTo(f); f.createNewFile(); fileNames[index++] =basePath+destDir+fileNameNew; } } catch (Exception e) { throw e; } } /** * * @Title: upload * @Description: TODO * @param: @param file * @param: @param destDir * @param: @param request * @param: @throws Exception * @return: void * @author: 刘云生 * @Date: 2017年4月14日 上午10:16:16 * @throws */ public void upload(MultipartFile file, String destDir,HttpServletRequest request) throws Exception { String path = request.getContextPath(); //http://localhost:8088/huahang String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path; try { String suffix = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".")+1); int length = getAllowSuffix().indexOf(suffix); if(length == -1){ throw new Exception("请上传允许格式的文件"); } if(file.getSize() > getAllowSize()){ throw new Exception("您上传的文件大小已经超出范围"); } String realPath = request.getSession().getServletContext().getRealPath("/")+"/"; File destFile = new File(realPath+destDir); if(!destFile.exists()){ destFile.mkdirs(); } String fileNameNew = getFileNameNew()+"."+suffix; File f = new File(destFile.getAbsoluteFile()+"/"+fileNameNew); file.transferTo(f); f.createNewFile(); //包含网站的全路径http://localhost:8080/QDLIMAP/upload/user/20170414104142667.png //fileName = basePath+destDir+fileNameNew; //返回相对路径upload/user/20170414104142667.png fileName = destDir+fileNameNew; } catch (Exception e) { throw e; } } }
总结
以上所述是小编给大家介绍的webuploader 实现图片批量上传功能附实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
