plupload上传图片等文件到七牛云平台


1.引入插件



2:引入七牛cdn


3.html 代码


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('
  • '); $('#file-list li i').on("click", function (){ $(this).parent().remove(); }); }, 'Error': function(up, err, errTip) { //上传出错时,处理相关的事情 alert(errTip); }, 'UploadComplete': function() { //队列文件处理完毕后,处理相关的事情 // $('.el-loading-mask').hide(); } } });

    你可能感兴趣的:(前端开发)