1.引入插件
<script src="/themes/bqg/js/lib/plupload.full.min.js"></script>
2:引入七牛cdn
<script src="/themes/bqg/js/qiniu.min.js"></script>
3.html 代码
<ul id="file-list">
<li class="addimg">
<input value="+" id="browse" type="button" capture="camera" accept="image/*" name="cameraInput">
<div class="file-container" id="container"></div>
</li>
</ul>
4.js代码
var uploader = Qiniu.uploader({
runtimes: 'html5,flash,html4',
browse_button: 'browse',
uptoken_func: function(file){
var uploadToken = '';
$.ajax({
url: '/Api/qiniu/uploadToken',
dataType: 'json',
async: false,
success: function (req) {
if (req.status == 0) {
uploadToken = req.token;
}
}
})
return uploadToken;
},
get_new_uptoken: false,
unique_names: true,
domain: 'http://img.bqvalley.com',
container: 'container',
max_file_size: '40mb',
flash_swf_url: './js/Moxie.swf',
max_retries: 3,
dragdrop: true,
drop_element: 'container',
chunk_size: '4mb',
auto_start: true,
filters: [
{title : "Image files", extensions : "jpg,jpeg,png"},
],
init: {
'FileFiltered': function(uploader, file) {
},
'FilesAdded': function(up, files) {
plupload.each(files, function(file) {
// 文件添加进队列后,处理相关的事情
});
},
'BeforeUpload': function(up, file) {
// 每个文件上传前,处理相关的事情
// $('.el-loading-mask').show();
},
'UploadProgress': function(up, file) {
// 每个文件上传时,处理相关的事情
},
'FileUploaded': function(up, file, info) {
// 每个文件上传成功后,处理相关的事情
// 其中info是文件上传成功后,服务端返回的json
var domain = up.getOption('domain');
var res = JSON.parse(info);
var sourceLink = domain + '/' + res.key;
$('#file-list').prepend('<li><img src="'+ sourceLink +'" /><i></i></li>');
$('#file-list li i').on("click", function (){
$(this).parent().remove();
});
},
'Error': function(up, err, errTip) {
//上传出错时,处理相关的事情
alert(errTip);
},
'UploadComplete': function() {
//队列文件处理完毕后,处理相关的事情
// $('.el-loading-mask').hide();
}
}
});