https://github.com/aralejs/upload
iframe and html5 file uploader
https://github.com/aralejs/upload
Last synced: 11 months ago
JSON representation
iframe and html5 file uploader
- Host: GitHub
- URL: https://github.com/aralejs/upload
- Owner: aralejs
- Created: 2012-06-13T09:14:10.000Z (almost 14 years ago)
- Default Branch: master
- Last Pushed: 2015-11-23T09:08:53.000Z (over 10 years ago)
- Last Synced: 2024-11-05T05:05:05.612Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://aralejs.org/upload/
- Size: 418 KB
- Stars: 85
- Watchers: 26
- Forks: 41
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: HISTORY.md
Awesome Lists containing this project
- awesome-frontend - arale-upload - 轻量级 iframe and html5 file uploader
- awesome-frontend - arale-upload - 轻量级 iframe and html5 file uploader
- awesome-front-end - arale-upload - 轻量级 iframe and html5 file uploader
README
# Upload
---------------
[](http://spmjs.io/package/arale-upload)
iframe and html5 uploader.
⇪
## 演示
查看演示，你需要 clone 一份代码：
```
$ git clone git://github.com/aralejs/upload
$ cd upload
$ npm install
$ spm install
$ node server.js
```
然后访问：http://localhost:8000/demo.html
## Attributes
```javascript
var uploader = new Uploader({
trigger: '#upload-icon',
name: 'image',
action: '/upload',
accept: 'image/*',
data: {'xsrf': 'hash'},
multiple: true,
error: function(file) {
alert(file);
},
success: function(response) {
alert(response);
},
progress: function(event, position, total, percent, files) {
console.log(percent);
}
});
```
### trigger `element|selector`
trigger 唤出文件选择器，可以是：
- 选择器
- element
- jQuery Object
### name `string`
name 即为 `` 的值，即上传文件时对应的 name。
### action `url`
action 为 `` 的值，表单提交的地址。
### accept `string`
支持的文件类型，比如 `image/\*` 为只上传图片类的文件。可选项。
### multiple `boolean`
是否支持多文件上传。默认为 false。
### data `object`
随表单一起要提交的数据。
### error `function`
上传失败的回调函数。
### success `function`
上传成功的回调函数。
### progress `function`
上传的进度回调，不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节，总字节，进度百分比和当前文件列表。
## Methods
链式调用:
```javascript
var uploader = new Uploader({
trigger: '#upload-icon',
name: 'image',
action: '/upload',
data: {'xsrf': 'hash'}
}).success(function(response) {
alert(response);
}).error(function(file) {
alert(file);
});
```
## Data API
```html
Upload
var uploader = new Uploader({'trigger': '#upload'});
// more friendly way
// var uploader = new Uploader('#upload');
uploader.success(function(response) {
alert(response);
});
```
## Advanced
Demo in **API** section could not be controlled. When you select a file, it will
be submitted immediately. We can broke the chain with ``change``:
```javascript
var uploader = new Uploader({
trigger: '#upload-icon',
name: 'image',
action: '/upload',
data: {'xsrf': 'hash'}
}).change(function(files) {
for (var i=0; i