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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

曲线人

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值