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

发布于 2020-03-28 10:32:03 字数 3571 浏览 1395 评论 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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84935 人气
更多

推荐作者

遥远的她

文章 0 评论 0

情深如许

文章 0 评论 0

18120987591

文章 0 评论 0

女皇必胜

文章 0 评论 0

13002228876

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。