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() {