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(); } } });