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
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 即为 <input name="{{name}}"> 的值，即上传文件时对应的 name。
action url
action 为 <form action="{{action}}"> 的值，表单提交的地址。
accept string
支持的文件类型，比如 image/\* 为只上传图片类的文件。可选项。
multiple boolean
是否支持多文件上传。默认为 false。
data object
随表单一起要提交的数据。
error function
上传失败的回调函数。
success function
上传成功的回调函数。
progress function
上传的进度回调，不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节，总字节，进度百分比和当前文件列表。
Methods
链式调用:
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
<a id="upload" data-name="image" data-action="/upload" data-data="a=a&b=b">Upload</a>
<script>
var uploader = new Uploader({'trigger': '#upload'});
// more friendly way
// var uploader = new Uploader('#upload');
uploader.success(function(response) {
alert(response);
});
</script>
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:
var uploader = new Uploader({
trigger: '#upload-icon',
name: 'image',
action: '/upload',
data: {'xsrf': 'hash'}
}).change(function(files) {
for (var i=0; i<files.length; i++) {
console.log('you are selecting ' + files[i].name + ' Size: ' + files[i].size);
}
// Default behavior of change is
// this.submit();
}).success(function(response) {
alert(response);
});
Now you should handle it yourself:
$('#submit').click(function() {
uploader.submit();
});
Show Progress
It is impossible to show progress, but you can make a fake prgress.
var uploader = new Uploader({
trigger: '#upload-icon',
name: 'image',
action: '/upload',
data: {'xsrf': 'hash'},
progress: function(e, position, total, percent, files) {
$('#progress').text('Uploading ... ' + percent + '%');
}
}).change(function(files) {
// before submit
$('#progress').text('Uploading ...');
this.submit();
}).success(function(response) {
$('#progress').text('Success');
alert(response);
});
Seajs Hint
Load uploader with seajs:
seajs.use('upload', function(Uploader) {
var uploader = new Uploader({
});
});
Changelog
2013-12-10 1.1.0
- Add upload progress for html5 uploader
- change function argument change to a files list.
- fix multiple attribute.
- fix this in change function
- fix FileList object in ie 9-
2013-07-18 1.0.1
- Support choosing the same file for uploader
- Fix memory leaks for FormData
2013-06-25 1.0.0
Combine iframe and html5 uploader.
39 Jan 3, 2023
16 Dec 24, 2022
15 Oct 11, 2022
17 Dec 30, 2022
6 Dec 18, 2022
21 Jun 20, 2022
18 Nov 2, 2022
5 Dec 15, 2022
9 Mar 6, 2022
24 Dec 16, 2022
5.2k Jan 3, 2023
4 Sep 23, 2022
17 Dec 23, 2022
16 Aug 6, 2022
5 Dec 21, 2022
33.4k Jan 7, 2023
6 Mar 5, 2022
1 Dec 22, 2021
34 Jan 4, 2023