iframe and html5 file uploader
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.gitignore
HISTORY.md
README.md
demo.html
index.js
package.json
server.js

README.md

Upload


spm package

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

  1. Add upload progress for html5 uploader
  2. change function argument change to a files list.
  3. fix multiple attribute.
  4. fix this in change function
  5. fix FileList object in ie 9-

2013-07-18 1.0.1

  1. Support choosing the same file for uploader
  2. Fix memory leaks for FormData

2013-06-25 1.0.0

Combine iframe and html5 uploader.

IE hint

https://github.com/blueimp/jQuery-File-Upload/issues/1795