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

时间:2022-08-23 15:00:55

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

1.引入插件

<script src="/themes/bqg/js/lib/plupload.full.min.js"></script>


2:引入七牛cdn

<script src="/themes/bqg/js/qiniu.min.js"></script>


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