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

来源：互联网发布：汉朝使者知乎编辑：程序博客网时间：2024/06/05 20:19

1.引入插件

2：引入七牛cdn

3.html 代码

<ul id="file-list"><li class="addimg">       <input value="+" id="browse" type="button" capture="camera" accept="image/*" name="cameraInput">       <div class="file-container" id="container"></div></li></ul>

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

0 0