5x5_jq_uploader 中文文档教程

发布于 3年前 浏览 28 项目主页 更新于 3年前

5x5jquploader

这个插件可以用来立即创建一个 dropfile 区域和文件队列,只需很少的设置。 使用 Bootstrap 进行响应式布局和警报。

可以在此处找到演示页面。

可以在此处找到具有相同功能但未使用 jQuery 编写并使用 Materialize 进行布局的备用上传器。

Installation

使用 npm;

$ npm install jquery bootstrap 5x5_jq_uploader

使用 cdn;

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Basic Setup

    // in script...
    $(function(){ 
        $("#uploader").initUploader({destination:'/uploaderUrl'});
    });

    <!--in body-->
    <div id="uploader"></div>

Options

初始化上传器时可以指定的选项;

NameTypeDefaultDescription
destinationstringnullRequired. Path to a processing script/api
destinationParamsobjectnullKey/value pairs that can be used for creating a querystring on upload
sizeLimitinteger1Limit of individual file sizes, in MB
fileLimitinteger5Limit of total number files that can be queued for upload
selectOptsobjectnullKey/value pairs used to render a select element for each file queued for upload. Key is used for the individual option value and the key's value displayed to user. Chosen value gets appended to file object as property 'fileType'
showDescriptionbooleanfalseIf true will render a text input for each file queued for upload. Value gets appended to file object as property 'description'
postFnfunctionnoopA callback for when a upload has completed successfully

5x5jquploader

This plug in can be used to instantly create a dropfile area and file queue with very little setup. Uses Bootstrap for responsive layout and alerts.

Demo page can be found here.

An alternate uploader with the same functionality but written without jQuery and using Materialize for layout can be found here.

Installation

Using npm;

$ npm install jquery bootstrap 5x5_jq_uploader

Using a cdn;

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

Basic Setup

    // in script...
    $(function(){ 
        $("#uploader").initUploader({destination:'/uploaderUrl'});
    });

    <!--in body-->
    <div id="uploader"></div>

Options

Options that can be specified when initializing uploader;

NameTypeDefaultDescription
destinationstringnullRequired. Path to a processing script/api
destinationParamsobjectnullKey/value pairs that can be used for creating a querystring on upload
sizeLimitinteger1Limit of individual file sizes, in MB
fileLimitinteger5Limit of total number files that can be queued for upload
selectOptsobjectnullKey/value pairs used to render a select element for each file queued for upload. Key is used for the individual option value and the key's value displayed to user. Chosen value gets appended to file object as property 'fileType'
showDescriptionbooleanfalseIf true will render a text input for each file queued for upload. Value gets appended to file object as property 'description'
postFnfunctionnoopA callback for when a upload has completed successfully
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文