头图

easyUpload.js V4.0.0
一款轻量级、易使用、配置灵活的H5/Web上传插件,基于file input。采用原生js及css编写,不依赖其他类库,兼容IE9及以上,压缩体积仅有8kb (css+js)。支持多文件上传,多实例上传,并发上传,混合上传等

实例截图

👉点我立即测试)

特性

  • 上传文件类型/数量/大小可配置
  • 上传前中后文件状态及上传进度实时预览
  • 支持多实例上传/批量上传/多类型文件混合上传
  • 支持并发上传(多文件同时上传)
  • 支持自由定义上传数据格式,如base64等
  • 支持自由配置请求头等,api保持和原生XMLHttpRequest一致
  • 支持自由配置请求成功状态
  • css与结构分离,支持自由定制样式
  • 原生js编写,不依赖任何类库

使用说明

  1. html页面内引入easyUpload.min.js和easy_upload.min.css,简单配置后即可使用
  2. 生产环境建议使用dist文件夹内压缩代码,二次开发测试可参考src文件夹内源代码

配置说明

    // 初始化easyUpload,填写必要参数"节点id"和"url"即可
    var easy = new EasyUpload('#easy1', {
        url: 'https://jsonplaceholder.typicode.com/posts/',
        naxSize: 5,
        maxCount: 3,
        // readAs: 'BinaryString'
    });
    // 本次导入文件数>限定数maxCount时,触发onMax事件
    easy.onMax = function (fs) {
        // in为本次导入文件数,max为限定文件数
        console.log('in:' + fs.in, 'max:' + fs.max);
    }
    // 设置XMLHttpRequest实例的请求头
    easy.setHeader = function (xhr) {
        // 如下:
        // xhr.setRequestHeader('Content-Type', 'application/json');
    }
    // 自定义上传文件数据格式,未定义此方法时以参数readAs定义格式上传(默认base64格式)
    easy.setData = function (file) {
        // flie 为文件信息对象,file.source为原始文件对象
        // console.log(file)

        // 测试用
        return 'abcdefg';
    }
    // setFLag用来标识文件成功上传的状态
    easy.setFlag = function () {
        // return一个结果为true或者false的表达式,用来判断文件是否成功上传到服务器,如下:
        // return this.status == 200; 
    }
    // 文件上传过程中会触发onProgress事件
    easy.onProgress = function (p) {
        // p是上传进度百分比
        console.log('上传中', p)
    }
    // 每完成一个文件上传会触发onLoad事件
    easy.onLoad = function (_this) {
        // _this是当前XMLHttpRequest实例
        console.log('上传完一个', _this)
    }
    // 每失败一个文件上传会触发onError事件
    easy.onError = function (_this) {
        // _this是当前XMLHttpRequest实例
        console.log('上传失败一个', _this)
    }
    // 文件队列(所有文件)上传完成后会触发onEnd事件
    easy.onEnd = function () {
        // this是本次new出来的EasyUpload实例对象,this包含本实例的配置、属性、方法等
        console.log('上传完成', this)
    }

参数说明

// 以下为默认配置,重新配置后将覆盖
    var oConf = {
        accept: '.jpg,.png,.pdf,.doc,.docx', // 允许导入文件类型
        btnS: '导入文件', // 导入文件按钮展示文字
        btnU: '上传', // 上传文件按钮展示文字
        btnD: '删除', // 删除文件按钮展示文字
        btnC: '终止', // 终止上传按钮展示文字
        maxCount: 3, // 允许单次导入文件数量
        naxSize: 3, // 允许单个文件最大体积,单位M
        multiple: true, // 是否允许一次导入多个文件
        responseType: 'text', // 设置XMLHttpRequest响应数据格式
        timeout: 0, // 设置XMLHttpRequest求超时时间
        url: '', // 文件上传地址
        withCredentials: true, // 设置跨域请求是否提供凭据信息,
        readAs: 'DataURL' // 默认设置读取及长传文件为DataURL即base64格式。未定义setData方法情况下,以此字段定义数据格式上传
    };

插件作者邮箱及Github

@email: funnyque@163.com
@email: https://github.com/funnyque/easyUpload.js


队列先生
43 声望0 粉丝

全栈学习者