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>
 

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