在七牛上传之后如何自己自定义上传完成处理并在页面显示。

Qiniu 七牛问题解答

很多用户不懂怎么写上传完成后的处理事件。我带大家来写个。

问题解决方案1,首先要在如下的main.js中做如下的配置修改。$(uploader = Qiniu.uploader({runtimes: ‘html5,flash,html4’,browse_button: ‘pickfiles’,container: ‘container’,drop_element: ‘container’,max_file_size: ‘100mb’,flash_swf_url: ‘js/plupload/Moxie.swf’,dragdrop: true,chunk_size: ‘4mb’,uptoken_url: “servlet/responseHandler”,domain: $(‘#domain’).val(),auto_start: true,init: {‘FilesAdded’: function(up, files) {$(‘table’).show();$(‘#success’).hide();plupload.each(files, progress = new FileProgress(file, ‘fsUploadProgress’);progress.setStatus(“缁澶绶…”);});},progress = new FileProgress(file, ‘fsUploadProgress’);var chunk_size = plupload.parseSize(this.getOption(‘chunk_size’));if (up.runtime === ‘html5’ && chunk_size) {progress.setChunkProgess(chunk_size);}},progress = new FileProgress(file, ‘fsUploadProgress’);var chunk_size = plupload.parseSize(this.getOption(‘chunk_size’));progress.setProgress(file.percent + “%”, up.total.bytesPerSec, chunk_size);},’UploadComplete’: function() {$(‘#success’).show();},progress = new FileProgress(file, ‘fsUploadProgress’);progress.setComplete(up, info);},’Error’: function(up, err, errTip) {$(‘table’).show();var progress = new FileProgress(err.file, ‘fsUploadProgress’);progress.setError();progress.setStatus(errTip);}}});uploader.bind(‘FileUploaded’, function() {console.log(‘hello man,a file is uploaded’);});$(‘#container’).on(‘dragenter’,function(e) {e.preventDefault();$(‘#container’).addClass(‘draging’);e.stopPropagation();}).on(‘drop’, function(e) {e.preventDefault();$(‘#container’).removeClass(‘draging’);e.stopPropagation();}).on(‘dragleave’, function(e) {e.preventDefault();$(‘#container’).removeClass(‘draging’);e.stopPropagation();}).on(‘dragover’, function(e) {e.preventDefault();$(‘#container’).addClass(‘draging’);e.stopPropagation();});$(‘#show_code’).on(‘click’, function() {$(‘#myModal-code’).modal();$(‘pre code’).each(function(i, e) {hljs.highlightBlock(e);});});$(‘body’).on(‘click’, ‘table button.btn’, function() {$(this).parents(‘tr’).next().toggle();});(!url) {return 0;}var arr = url.split(‘http://blog.csdn.net/’);for (var i = 0, len = arr.length; i < len; i++) {if (arr[i] === ‘rotate’) {return parseInt(arr[i + 1], 10);}}return 0;};$(img = $(‘#myModal-img’).find(‘.modal-body img’);var key = img.data(‘key’);var oldUrl = img.attr(‘src’);var originHeight = parseInt(img.data(‘h’), 10);var fopArr = [];var rotate = getRotate(oldUrl);if (!$(this).hasClass(‘no-disable-click’)) {$(this).addClass(‘disabled’).siblings().removeClass(‘disabled’);if ($(this).data(‘imagemogr’) !== ‘no-rotate’) {fopArr.push({‘fop’: ‘imageMogr2′,’auto-orient’: true,’strip’: true,’rotate’: rotate,’format’: ‘png’});}} else {$(this).siblings().removeClass(‘disabled’);var imageMogr = $(this).data(‘imagemogr’);if (imageMogr === ‘left’) {rotate = rotate – 90 < 0 ? rotate + 270 : rotate – 90;} else if (imageMogr === ‘right’) {rotate = rotate + 90 > 360 ? rotate – 270 : rotate + 90;}fopArr.push({‘fop’: ‘imageMogr2′,’auto-orient’: true,’strip’: true,’rotate’: rotate,’format’: ‘png’});}$(watermark = $(this).data(‘watermark’);var imageView = $(this).data(‘imageview’);var imageMogr = $(this).data(‘imagemogr’);if (watermark) {fopArr.push({fop: ‘watermark’,mode: 1,image: ‘http://www.b1.qiniudn.com/images/logo-2.png’,dissolve: 100,gravity: watermark,dx: 100,dy: 100});}if (imageView) {var height;switch (imageView) {case ‘large’:height = originHeight;break;case ‘middle’:height = originHeight * 0.5;break;case ‘small’:height = originHeight * 0.1;break;default:height = originHeight;break;}fopArr.push({fop: ‘imageView2’,mode: 3,h: parseInt(height, 10),q: 100,format: ‘png’});}if (imageMogr === ‘no-rotate’) {fopArr.push({‘fop’: ‘imageMogr2′,’auto-orient’: true,’strip’: true,’rotate’: 0,’format’: ‘png’});}});var newUrl = Qiniu.pipeline(fopArr, key);var newImg = new Image();img.attr(‘src’, ‘loading.gif’);newImg.onload = function() {img.attr(‘src’, newUrl);img.parent(‘a’).attr(‘href’, newUrl);};newImg.src = newUrl;return false;});});2,在如上的代码片中做如下修改:慢慢学会了长大。流转的时光,

在七牛上传之后如何自己自定义上传完成处理并在页面显示。

相关文章:

你感兴趣的文章:

标签云: