在七牛上传之后如何自己自定义上传完成处理并在页面显示。_html/css_WEB-ITnose
程序员文章站
2022-04-13 17:10:27
...
Qiniu 七牛问题解答
很多用户不懂怎么写上传完成后的处理事件。我带大家来写个。
问题解决方案
1，首先要在如下的main.js中做如下的配置修改。
/*global Qiniu *//*global plupload *//*global FileProgress *//*global hljs */$(function() { var 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(), // downtoken_url: '/downtoken', // unique_names: true, // save_key: true, // x_vars: { // 'id': '1234', // 'time': function(up, file) { // var time = (new Date()).getTime(); // // do something with 'time' // return time; // }, // }, auto_start: true, init: { 'FilesAdded': function(up, files) { $('table').show(); $('#success').hide(); plupload.each(files, function(file) { var progress = new FileProgress(file, 'fsUploadProgress'); progress.setStatus("缁?澶?绶?..."); }); }, 'BeforeUpload': function(up, file) { var progress = new FileProgress(file, 'fsUploadProgress'); var chunk_size = plupload.parseSize(this.getOption('chunk_size')); if (up.runtime === 'html5' && chunk_size) { progress.setChunkProgess(chunk_size); } }, 'UploadProgress': function(up, file) { var 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(); // alert("woaini"); // var v = 4, // document.getElementById('woaini').outerHTML = 'woaini'; // alert("wobuai"); }, 'FileUploaded': function(up, file, info) { var 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); } // , // 'Key': function(up, file) { // var key = ""; // // do something with key // return key // } } }); 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(); }); var getRotate = function(url) { if (!url) { return 0; } var arr = url.split('/'); for (var i = 0, len = arr.length; i 360 ? rotate - 270 : rotate + 90; } fopArr.push({ 'fop': 'imageMogr2', 'auto-orient': true, 'strip': true, 'rotate': rotate, 'format': 'png' }); } $('#myModal-img .modal-body-footer').find('a.disabled').each(function() { var 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，在如上的代码片中做如下修改：
在标记处添加如下代码，实现在前端显示返回来的图片。（用js来实现前端的控件显示）
var res = eval("(" + info.toString() + ")"); alert(res.key); var sourceLink = domain + res.key; //获取上传成功后的文件的Url alert(sourceLink); $("#images").attr("src",sourceLink); var input=top.document.getElementById("photo_small"); input.setAttribute("src",sourceLink);