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 = trigger: '#upload-icon' name: 'image' action: '/upload' accept: 'image/*' data: 'xsrf': 'hash' multiple: true { ; } { ; } { console; };
element|selector
trigger trigger 唤出文件选择器,可以是:
- 选择器
- element
- jQuery Object
string
name name 即为 <input name="{{name}}">
的值,即上传文件时对应的 name。
url
action action 为 <form action="{{action}}">
的值,表单提交的地址。
string
accept 支持的文件类型,比如 image/\*
为只上传图片类的文件。可选项。
boolean
multiple 是否支持多文件上传。默认为 false。
object
data 随表单一起要提交的数据。
function
error 上传失败的回调函数。
function
success 上传成功的回调函数。
function
progress 上传的进度回调,不支持 IE9-。回调的参数分别为 ajaxEvent, 当前上传字节,总字节,进度百分比和当前文件列表。
Methods
链式调用:
var uploader = trigger: '#upload-icon' name: 'image' action: '/upload' data: 'xsrf': 'hash';
Data API
Upload
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 = trigger: '#upload-icon' name: 'image' action: '/upload' data: 'xsrf': 'hash';
Now you should handle it yourself:
;
Show Progress
It is impossible to show progress, but you can make a fake prgress.
var uploader = trigger: '#upload-icon' name: 'image' action: '/upload' data: 'xsrf': 'hash' { text'Uploading ... ' + percent + '%'; };
Seajs Hint
Load uploader with seajs:
seajs;
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.