After Qiniu uploads it, how to customize the upload completion process and display it on the page. _html/css_WEB-ITnose

Qiniu Qiniu Questions and Answers

Many users don’t know how to write the processing event after the upload is completed. Let me take you to write one.

Problem solution

1. First, make the following configuration changes in main.js as follows.

/*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 = '<a>woaini</a>';              // 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 < len; i++) {            if (arr[i] === 'rotate') {                return parseInt(arr[i + 1], 10);            }        }        return 0;    };    $('#myModal-img .modal-body-footer').find('a').on('click', function() {        var 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'            });        }        $('#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. Make the following modifications in the above code snippet:

Add the following code at the mark to display the returned image on the front end. (Use js to implement front-end control display)

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

Result demonstration