jQuery File Upload的使用

jQuery File Upload 是一个Jquery文件上传组件，支持多文件上传、取消、删除，上传前缩略图预览、列表显示图片大小，支持上传进度条显示等，如下就介绍一下该插件的简单使用

一、须要加载的js文件有

　　jquery.js，

　　jquery-ui-widget.js，

　　jquery.iframe-transport.js，

　　jquery.fileupload.js

二、upload.js的配置

a、html代码

<input type="file" id='file'>
<input type="button" value="提交" id='submit'>

b、与页面绑定的javascript代码

$('#submit').click(function () {
    if (currentFile) {
        //动态的传输参数
        currentFile.formData = {id:123};
        //进行文件提交
        currentFile.submit();
    } else {
        utils.error('请传入.xlsx文件');
    }
});

c、javascript代码

$('#file').fileupload({
    //type: 文件上传HTTP请求方式，能够选择“POST”，“PUT”或者"PATCH",
    type: 'POST',
    //url：请求发送的目标url,默认为post方式
    url: '/admin/qa/upload-file',
    //dataType:但愿从服务器返回的数据类型，默认"json"
    dataType: 'json',
    //formData:须要传输的参数，这里是静态的传输，若是须要动态的传输须要在add这个进程里面进行传输
    formData: {id: 123},
    //autoUpload:是否自动上传，即当文件放入file以后便自动上传，默认为true
    autoUpload: false,
    //acceptFileTypes：容许上传的的文件类型
    acceptFileTypes: /(\.|\/)xlsx$/i,
    //maxFileSize: 最大上传文件大小
    maxFileSize: 1,
    //minFileSize:最小上传文件大小,单位B
    minFileSize: 1,
    //previewMaxWidth : 图片预览区域最大宽度
    //添加文件后触发
    add: function (ev, data) {
        currentFile = null;
        $('#result-panel').html('');
        var name = data.files[0].name;
        if (/(\.|\/)xlsx$/i.test(name)) {
            $('#xlsFileShow').html(name);
            //data里面包含些方法，若是submit提交这个API，能够根据用户的需求进行提交
            //若是须要动态的传参能够用data.formData=123，进行传输
            currentFile = data;
            //执行若是不符合的条件
        } else {
            //执行若是传入的文件名称不符合正则匹配的代码
        }
    },
    //当一个单独的文件处理队列结束（完成或失败时）触发
    progressalways: function (e, data) {
    },
    //全局上传处理事件的回调函数,即上传过程时触发
    progressall: function (e, data) {
        //进度条能够用data.loaded与data.total的比进行完成
    },
    //上传请求失败时触发的回调函数，若是服务器返回一个带有error属性的json响应这个函数将不会被触发
    fail: function (e, data) {
    },
    // 上传请求成功时触发的回调函数，若是服务器返回一个带有error属性的json响应这个函数也会被触发
    done: function (e, data) {
    },
    //上传请求结束时（成功，错误或者停止）都会被触发。
    always: function (e, data) {
    }
})

 具体的官方文档地址 ：

http://hayageek.com/docs/jquery-upload-file.php#doc