arale-upload 基于 iframe 框架和 html5 上传组件 - 文章教程

arale-upload 基于 iframe 框架和 html5 上传组件

发布于 2020-03-28 字数 3739 浏览 1290 评论 0

使用方法

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({
    });
});

github 地址:https://github.com/aralejs/upload

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清风夜微凉

文章 1 评论 0

为你鎻心

文章 2 评论 0

xxhui

文章 0 评论 0

1PKOH46yx8j0x

文章 0 评论 0

Arthur

文章 0 评论 0