<script type='text/javascript'>
var appid = 'A6080889043804';
var appkey = 'CE42DDAD-F8AE-0616-D327-2B59700ED55D';
var now = Date.now();
appkey = SHA1(appid + "UZ" + appkey + "UZ" + now) + "." + now;
jQuery(function() {//这个只是放在里面好管理而已,不放也可以。不过多个上传插件最后这样,不然变量定义麻烦
var $ = jQuery,
$list = $('#thelist'),
$btnUpdata = $('#ctlBtn1'),
// 优化retina, 在retina下这个值是2
ratio = window.devicePixelRatio || 1,
thumbnailWidth = 100 * ratio,
thumbnailHeight = 100 * ratio,
pickIdName = "#picker1",
uploadurl;
uploadurl = WebUploader.create({
//pick: pickIdName, // 选择文件的按钮。可选。// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: {
id: pickIdName,
innerHTML: '点击选择图片'
},
swf: '../scripts/Uploader.swf', // swf文件路径
server: 'http://d.apicloud.com/mcm/api/file', // 文件接收服务端。
resize: false, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
auto: true, //自动上传无需点击
//accept: {// 只允许选择图片文件。
// title: 'Images',
// extensions: 'gif,jpg,jpeg,bmp,png',
// mimeTypes: 'image/*'
// }
});
uploadurl.on('uploadBeforeSend', function(block, data, headers) {
headers["X-APICloud-AppKey"] = appkey;
headers["X-APICloud-AppId"] = appid;
});
uploadurl.on("fileQueued", function(file) {
var $li = $('<div id="' + file.id + '" class="item">' +
'<img>' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">等待上传...</p>' +
'</div>');
var $img = $li.find('img');
$list.append($li)
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploadurl.makeThumb(file, function(error, src) {
if (error) {
//$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr('src', src);
}, thumbnailWidth, thumbnailHeight);
uploadurl.option('formData', {
filename: file.name, //新文件名
type: file.type //文件类型
});
});
//文件上传成功
uploadurl.on('uploadSuccess', function(file, res) {
if (res && res.id) {
alert(res.url);
$('#' + file.id).find('p.state').text('已上传');
} else if (res && res.status == 0) {
alert("失败" + JSON.stringify(res))
} else {
alert("失败")
}
});
//文件上传失败
uploadurl.on('uploadError', function(file, reason) {
$('#' + file.id).find('p.state').text('上传出错');
});
//上传完成,不管成功失败
uploadurl.on('uploadComplete', function(file) {
$('#' + file.id).find('.progress').fadeOut(); //方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
uploadurl.removeFile(file, true);
});
//上传中
uploadurl.on('uploadProgress', function(file, percentage) {
//$('#uploaderInfo').html(percentage);
var $li = $('#' + file.id),
$percent = $li.find('.progress .progress-bar');
// 避免重复创建
if (!$percent.length) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
'<div class="remove-this">X</div>' +
'</div>').appendTo($li).find('.progress-bar');
$li.on('click', '.remove-this', function() {
uploadurl.removeFile(file, true);
$list.find('div#' + file.id + '').replaceWith('');
})
}
$li.find('p.state').text('上传中');
$percent.css('width', percentage * 100 + '%');
});
var state = '';
uploadurl.on('all', function(type) {
if (type === 'startUpload') {
state = 'uploading';
} else if (type === 'stopUpload') {
state = 'paused';
} else if (type === 'uploadFinished') {
state = 'done';
}
if (state === 'uploading') {
$btnUpdata.text('暂停上传');
} else {
$btnUpdata.text('开始上传');
}
});
$btnUpdata.on('click', function() {
if (state === 'uploading') {
uploadurl.stop(true);
} else {
uploadurl.upload();
}
});
});
</script>