定义webuploader.css 文件
.webuploader-container { position: relative; } .webuploader-element-invisible { position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px,1px,1px,1px); } .webuploader-pick { position: relative; display: inline-block; cursor: pointer; background: #00b7ee; padding: 10px 15px; color: #fff; text-align: center; border-radius: 3px; overflow: hidden; } .webuploader-pick-hover { background: #00a2d4; } .webuploader-pick-disable { opacity: 0.6; pointer-events:none; } /*demo样式*/ #uploader-demo .thumbnail { width: 110px; height: 110px; } #uploader-demo .thumbnail img { width: 100%; } .uploader-list { width: 100%; overflow: hidden; } .file-item { float: left; position: relative; margin: 0 20px 20px 0; padding: 4px; } .file-item .error { position: absolute; top: 4px; left: 4px; right: 4px; background: red; color: white; text-align: center; height: 20px; font-size: 14px; line-height: 23px; } .file-item .info { position: absolute; left: 4px; bottom: 4px; right: 4px; height: 20px; line-height: 20px; text-indent: 5px; background: rgba(0, 0, 0, 0.6); color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; z-index: 10; } .upload-state-done:after { content: "\f00c"; font-family: FontAwesome; font-style: normal; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 32px; position: absolute; bottom: 0; right: 4px; color: #4cae4c; z-index: 99; } #uploader-demo .uploader-list div.file-panel { position: absolute; height: 0; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#80000000', endColorstr='#80000000') \0; background: rgba(0, 0, 0, 0.5); width: 100%; top: 0; left: 0; overflow: hidden; z-index: 300; } #uploader-demo .uploader-list div.file-panel span { width: 24px; height: 24px; display: inline; float: right; text-indent: -9999px; overflow: hidden; background: url(icons.png) no-repeat; margin: 5px 1px 1px; cursor: pointer; } #uploader-demo .uploader-list div.file-panel span.rotateLeft { background-position: 0 -24px; } #uploader-demo .uploader-list div.file-panel span.rotateLeft:hover { background-position: 0 0; } #uploader-demo .uploader-list div.file-panel span.rotateRight { background-position: -24px -24px; } #uploader-demo .uploader-list div.file-panel span.rotateRight:hover { background-position: -24px 0; } #uploader-demo .uploader-list div.file-panel span.cancel { background-position: -48px -24px; } #uploader-demo .uploader-list div.file-panel span.cancel:hover { background-position: -48px 0; }
图片 在这里 自行下载icons.png
使用方式
页面引入 css 和 js 不在写代码了
// 图片上传demo $(function () { var $ = jQuery, $list = $('#fileList'), // 优化retina, 在retina下这个值是2 ratio = 1 || 1, // 缩略图大小 thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio, // 初始化Web Uploader uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '/content/plugins/webuploader/Uploader.swf', fileNumLimit: 1, // 文件接收服务端。 server: getRootPath() + '/uploadPicture', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', formData: { destDir: "user" }, // 不压缩image resize: false, // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png' //修改这行 } }); // 当有文件添加进来的时候 uploader.on('fileQueued', function (file) { var $list = $('#fileList'); var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<p class="imgWrap"><img></p>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); var $btns = $('<div class="file-panel">' + '<span class="cancel" >删除</span>').appendTo($li); $li.on('mouseenter', function () { $btns.stop().animate({height: 30}); }); $li.on('mouseleave', function () { $btns.stop().animate({height: 0}); }); // $list为容器jQuery实例 $list.append($li); $btns.on('click', 'span', function () { var index = $(this).index(); switch (index) { case 0: uploader.removeFile(file); removeFile(file); return; } }); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // 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('beforeFileQueued',function (file) { //限制个数 var fileNumLimit =uploader.options.fileNumLimit; var completeNum = uploader.getFiles("complete").length; if (fileNumLimit == completeNum){ $.fn.modalAlert("最大上传"+fileNumLimit+"个文件,不能超过","error"); } /*console.log("上传限制"+); console.log("上传成功"+);*/ }); // 文件上传过程中创建进度条实时显示。 uploader.on('uploadProgress', function (file, percentage) { var $li = $('#' + file.id), $percent = $li.find('.progress span'); // 避免重复创建 if (!$percent.length) { $percent = $('<p class="progress"><span></span></p>') .appendTo($li) .find('span'); } $percent.css('width', percentage * 100 + '%'); }); // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on('uploadSuccess', function (file, response) { //photoList.push(JSON.parse(response._raw)); //$("#photo").val(JSON.stringify(photoList)); $("#photo").val(response._raw); var fileStatusnum = uploader.getStats(); // $.fn.modalMsg("上传成功"+fileStatusnum.successNum+"个文件","success"); $.fn.modalMsg("上传成功", "success"); $('#' + file.id).addClass('upload-state-done'); }); // 文件上传失败,显示上传出错。 uploader.on('uploadError', function (file) { //alert("失败"); var $li = $('#' + file.id), $error = $li.find('div.error'); // 避免重复创建 if (!$error.length) { $error = $('<div class="error"></div>').appendTo($li); } $error.text('上传失败'); var fileStatusnum = uploader.getStats(); layer.msg("上传失败" + fileStatusnum.uploadFailNum + "个文件", {icon: 1, time: 1000}); }); // 完成上传完了,成功或者失败,先删除进度条。 uploader.on('uploadComplete', function (file) { $('#' + file.id).find('.progress').remove(); }); // 负责view的销毁 function removeFile( file ) { var $li = $('#'+file.id); $li.off().find('.file-panel').off().end().remove(); } });
fileNumLinit 我写1 只为了测试 个人根据项目修改限制个数
效果