5x5_uploader 中文文档教程
5x5_uploader
一个 Javascript 上传器，只需很少的设置即可创建一个 dropfile 区域、文件队列和可选的输入元素。
使用 Materialise 进行响应式布局和提醒。
演示页面可以在这里找到。
可以在此处找到具有相同功能但使用 Bootstrap 编写为 jQuery 插件的备用上传器。
Installation
使用 npm；
$ npm install 5x5_uploader materialize-css@next
使用 cdn；
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="5x5_uploader.min.js"></script>
Basic Setup
<div id="uploader">
<span id="config">
{
"destination": "/uploader.jsp"
}
</span>
</div>
Options
初始化上传器时可以指定的选项；
| Name | Type | Default | Description |
|---|---|---|---|
| destination | string | null | Required. Path to a processing script/api |
| destinationParams | object | null | Key/value pairs that can be used for creating a querystring on upload |
| sizeLimit | integer | 1 | Limit of individual file sizes, in MB |
| fileLimit | integer | 5 | Limit of total number files that can be queued for upload |
| selectOpts | object | null | Key/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' |
| showDescription | boolean | false | If true will render a text input for each file queued for upload. Value gets appended to file object as property 'description' |
5x5_uploader
A Javascript uploader that creates a dropfile area, file queue, and optional input elements with very little setup.
Uses Materialize for responsive layout and alerts.
Demo page can be found here.
An alternate uploader with the same functionality but written as a jQuery plug in using Bootstrap can be found here.
Installation
Using npm;
$ npm install 5x5_uploader materialize-css@next
Using a cdn;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="5x5_uploader.min.js"></script>
Basic Setup
<div id="uploader">
<span id="config">
{
"destination": "/uploader.jsp"
}
</span>
</div>
Options
Options that can be specified when initializing uploader;
| Name | Type | Default | Description |
|---|---|---|---|
| destination | string | null | Required. Path to a processing script/api |
| destinationParams | object | null | Key/value pairs that can be used for creating a querystring on upload |
| sizeLimit | integer | 1 | Limit of individual file sizes, in MB |
| fileLimit | integer | 5 | Limit of total number files that can be queued for upload |
| selectOpts | object | null | Key/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' |
| showDescription | boolean | false | If true will render a text input for each file queued for upload. Value gets appended to file object as property 'description' |
