上传 - AuxUI - 模块化前端UI框架

一个简单的表单形式上传组件，同时又不摒弃主流IE浏览器。

需要加载upload模块，可通过下列方式加载

   
//加载模块
auxui(['upload'], function (upload){

    upload.render({

        //选择文件的按钮
        pick: '.btt',

        //文件接收服务端
        server : 'http://auxui.aimlt.com',

        //是否自动上传,设置为 true 后，不需要手动调用上传，有文件选择即开始上传
        auto : false,

        //绑定上传按钮，通过点击此按钮开始执行上传
        btnSubmit : '.bttu',

        //默认值：undefined  验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit : 9999999999,

        //默认值：undefined, 验证文件总数量, 超出则不允许加入队列
        fileNumLimit : 5,

        //指定接受哪些类型的文件
        accept : 'gif,jpg,jpeg,bmp,png',

        //数据类型：xml、json、script
        dataType : 'json',

        //input表单 NAME名称
        fileName : 'files',

        //附加传递数据,每次发送都会发送此对象中的参数
        formData: {
            "OSSAccessKeyId": '11',
            "policy": '22',
            "signature": '33',
            "key": '123.63'
        },

        //请求头
        headers : {
            'access-token': 'currentCookieCheck'
        },

        //当文件被加入队列之前触发
        beforeFileQueued : function(file){
            console.log('加入队列之前触发',file);
        },

        //当文件被加入队列以后触发。
        fileQueued : function(file){
            console.log('加入队列以后触发',file);
        },

        //当文件被移除队列后触发。
        fileDequeued : function(file){
            console.log('文件删除后触发',file);
        },

        //上传过程中触发，携带上传进度
        uploadProgress : function(file,event, position, total, percentComplete){
            //position 已上传了多少,total 总大小, percentComplete 已上传的百分数
            var percentVal = percentComplete + '%';
            console.log('上传过程',percentVal, position, total);
        },

        //当请求之后调用。传入返回后的数据
        success : function (data) {
            console.log('上传成功',data);
        },

        //无论成功或失败都执行
        complete : function (xhr, file) {
            console.log('无论成功或失败都执行');
        },

        //在上传请求之前执行
        beforeSend : function (request) {
            console.log('在上传请求之前执行');
        },

        //在请求出错时调用
        error : function (e, file) {
            console.log(e, file);
        }

    });

});

实例

本实例并不会上传到服务器中，请修改文件接收服务端即可

<table class="table table-bordered table-file">
    <thead>
        <tr>
            <th scope="row">文件名</th>
            <td>进度</td>
            <td>状态</td>
            <td>操作</td>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
    <tfoot>
        <tr>
            <td colspan="4">
                <button class="btn-choice" type="button">选择文件</button>
                <button type="button" class="btn btn-primary btn-upload">开始上传</button>
            </td>
        </tr>
    </tfoot>
</table>
 <script>
auxui(['upload'], function (upload){
    var table = $('.table-file');

    $('body').on('click','.table-file .btn-del', function(event) {
        var id = $(this).attr('data-id');
        table.find('tbody .' + id).remove();
    });

    upload.render({
        //选择文件的按钮
        pick: '.btn-choice',
        // 文件接收服务端
        server : 'http://auxui.aimlt.com',
        //是否自动上传,设置为 true 后，不需要手动调用上传，有文件选择即开始上传
        auto : false,
        //绑定上传按钮
        btnSubmit : '.btn-upload',
        //默认值：undefined  验证单个文件大小是否超出限制, 超出则不允许加入队列。
        fileSingleSizeLimit : 9999999999,
        //默认值：undefined, 验证文件总数量, 超出则不允许加入队列
        fileNumLimit : 3,
        //指定接受哪些类型的文件
        accept : 'gif,jpg,jpeg,bmp,png',
        //数据类型：xml、json、script
        dataType : 'json',
        //input表单 NAME名称
        fileName : 'files',
        //当文件被加入队列以后触发。
        fileQueued : function(file){
            table.append('<tr class="'+file.id+'"> <td scope="row">'+file.name+'</td> <td></td> <td>等待上传</td> <td><a class="btn-del" href="javascript:;" data-id="'+file.id+'">删除</a></td> </tr>');
        },
        //当文件被移除队列后触发。
        fileDequeued : function(file){
            console.log('文件删除后触发',file);
        },
        //上传过程中触发，携带上传进度
        uploadProgress : function(file,event, position, total, percentComplete){
            table.find('tbody .' + file.id).find('td').eq(1).html(percentComplete + '%');
            //position 已上传了多少,total 总大小, percentComplete 已上传的百分数
            var percentVal = percentComplete + '%';
            console.log('上传过程',percentVal, position, total);
        },
        //当请求之后调用。传入返回后的数据
        success : function (data, textStatus, file) {
            table.find('tbody .' + file.id).find('td').eq(2).html('成功');
            console.log('上传成功',data);
        },
        //在请求出错时调用
        error : function (e, file) {
            table.find('tbody .' + file.id).find('td').eq(2).html('出错');
            console.log(e, file);
        }

    });
});
</script>

文件名	进度	状态	操作

参数选项

参数详见下表，合理的配置它们，应对各式各样的业务需求。

参数选项	说明	类型	默认值
pick	指向容器选择器，如：elem: '#id'	string	-
server	服务端上传接口	string	-
auto	是否自动上传,设置为 true 后，不需要手动调用上传	boolean	false
btnSubmit	指定上传按钮，当点击后立即上传，如：elem: '#id'	string	-
fileSingleSizeLimit	验证单个文件大小是否超出限制, 超出则不允许加入队列	number	undefined
fileNumLimit	验证文件总数量, 超出则不允许加入队列	number	undefined
accept	指定接受哪些文件类型，如：accept : 'gif,jpg,jpeg,bmp,png'	string	-
dataType	返回数据类型：xml、json、script	string	-
fileName	指定一个文件域NAME名称	string	-
formData	附加传递数据,每次发送都会发送此对象中的参数	object	-
headers	请求头信息	object	-
beforeFileQueued	当文件被加入队列之前触发	function	-
fileQueued	当文件被加入队列以后触发	function	-
fileDequeued	当文件被移除队列后触发	function	-
uploadProgress	上传过程中触发，携带上传进度	function	-
success	当请求之后调用，传入返回后的数据	function	-
complete	无论成功或失败都执行	function	-
beforeSend	在上传请求之前执行	function	-
error	出错时调用	function	-

方法

下面是upload插件中有用的方法：

方法	描述	实例
.render(options)	必须是一个标准的JSON格式	upload.render({ pick: '.btt', server : 'http://auxui.aimlt.com', auto : false });
.upload()	执行上传	upload.upload();
.reset()	文件列队中，不管成功与失败都会被清空	upload.reset();
.delFile(fileid)	从列队中移除文件，传入文件ID	upload.delFile('fileid');