定义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; } .upload-state-done-file:after { 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; }
使用方式
选择图片
页面引入 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 = $(
'' +
'' +
'' + file.name + '' +
''
),
$img = $li.find('img');
var $btns = $('' +
'删除').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('不能预览');
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 = $('
')
.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 = $('').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 只为了测试 个人根据项目修改限制个数
效果