Heim > Web-Frontend > HTML-Tutorial > 在七牛上传之后如何自己自定义上传完成处理并在页面显示。_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:47:17
Original
1209 Leute haben es durchsucht

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 = '<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;    });});
Nach dem Login kopieren

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);
Nach dem Login kopieren

结果演示

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage