知识站

 找回密码
 立即注册
知识站 首页 html 查看内容

jQuery File Upload的使用

2020-3-4 08:34| 发布者: admin| 查看: 20| 评论: 0

摘要: jQuery File Upload 是一个Jquery文件上传组件,支持多文件上传、取消、删除,上传前缩略图预览、列表显示图片大小,支持上传进度条显示等,以下就介绍一下该插件的简单使用1、需要加载的js文件有  jquery.js,  ...

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

1、需要加载的js文件有

  jquery.js,

  jquery-ui-widget.js,

  jquery.iframe-transport.js,

  jquery.fileupload.js

2、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) {
    }
})
发表评论

最新评论

Archiver|知识站 ( 鲁ICP备20004068号-1 )

鲁公网安备 37132502371390号

GMT+8, 2020-6-23 22:50 , Processed in 0.016708 second(s), 17 queries .

返回顶部