Use FileUploader Code Snip

最新推荐文章于 2019-09-20 11:01:05 发布

转载最新推荐文章于 2019-09-20 11:01:05 发布 · 85 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/halou/p/3495591.html

本文介绍如何利用Fine Uploader组件实现文件上传功能。通过引入必要的CSS和JS文件，并设置JavaScript初始化代码来配置文件上传的各项参数，如允许上传的文件类型、大小限制等。此外，还提供了一个用于触发文件上传的隐藏按钮。

//ref

<link href="http://cdn.bootcss.com/file-uploader/3.7.0/fineuploader.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/file-uploader/3.7.0/fineuploader.min.js"></script>
 <script src="http://cdn.bootcss.com/Cookies.js/0.3.1/cookies.min.js"></script>

//HTML

<div id="manual-fine-uploader">
</div>
<button id="triggerUpload" style="display:none">
</button>

//JS init Code

var manualuploader = new qq.FineUploader({
        element: document.getElementById("manual-fine-uploader"),
        request: {
            endpoint: baseUrl + 'reqType=addReportImage'
        },
        autoUpload: true,
        multiple: true,
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'txt'],
            sizeLimit: 9999999 //bytes
        },
        text: {
            uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        },
        callbacks: {
            onComplete: function (id, fileName, responseJSON) {
                $(".qq-upload-list").html("");
                //reloadData
                fetchShowImages(Cookies.get("resultReportId"));
            },
            onError: function (event, id, name, errorReason, xhrOrXdr) {
            },
        },
        debug: false
    });

    document.getElementById('triggerUpload').onclick = function () { 
        manualuploader.uploadStoredFiles();
    };