建站资源下载详情

为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery大文件分片上传插件fcup

来源:易助科技网浏览量:8收藏

简介

fcup是一个轻巧的 js 类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调。可以任意绑定 id, 自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型。

(下载的附件中附有DEMO)


参数说明:


参数类型默认备注
idstringdom的id
urlstring上传到服务器的url
check_urlstring检查上传url地址
typestring限制上传类型,多个用,号分割(不区分大小写),为空不限制
shard_sizeint,float2每次分片的大小,单位为M,因为要计算md5,所以如果条件允许,不要设定的太小
min_sizeint,float上传文件的最小M数
max_sizeint,float上传文件的最大M数
headersobject每次上传附带的文件头,请注意指定header头时将不能进行跨域操作
apped_dataobject每次上传附带的其它参数,传递到后台
timeoutint3000ajax超时时间
error_msgobjectobject错误提示
startfunctionfucntion实例化类后的开始事件
before_sendfunctionfucntion等待上传事件
progressfunctionfucntion上传进度事件
errorfunctionfucntion内部的错误提示函数
check_successfunctionfucntion检查地址回调,用于判断文件是否存在,类型,改变当前上传的片数等操作
successfunctionfucntion数据成功传递到后端的事件,这是一个循环事件


常用函数:


函数名说明
fcup.set_shard(file_index)设置当前的分片数起始数,用于断点上传时改变
fcup.cancel()取消上传事件
fcup.start_upload()开始上传事件


后端参数详情:


参数名注释
file_data分段的文件
file_name文件名称
file_total文件的总片数
file_index当前片数
file_md5文件的md5
file_size文件的总大小
file_chunksize当前切片的文件大小
file_suffix文件的后缀名


备注:以post的方式传递到后端


简单使用


// 上传案例2
let up = new fcup({
  id: "upid",
  // 绑定id
  url: "server/php_db/upload.php",
  // url地址
  check_url: "server/php_db/check.php",
  // 检查上传url地址
  type: "jpg,png,jpeg,gif",
  // 限制上传类型,为空不限制
  shard_size: "0.005",
  // 每次分片大小,单位为M,默认1M
  min_size: '',
  // 最小文件上传M数,单位为M,默认为无
  max_size: "2",
  // 上传文件最大M数,单位为M,默认200M
  // headers: {"version": "fcup-v2.0"},
  // 附加的文件头,默认为null, 请注意指定header头时将不能进行跨域操作
  // apped_data: {},
  //每次上传的附加数据
  // 定义错误信息
  error_msg: {
    1000: "未找到上传id",
    1001: "类型不允许上传",
    1002: "上传文件过小",
    1003: "上传文件过大",
    1004: "上传请求超时"
  },
  // 错误提示
  error: (msg) => {alert(msg);},
  // 初始化事件
  start: () => {
    console.log('上传已准备就绪');
    Progress2(0);
  },
  // 等待上传事件,可以用来loading
  before_send: () => {console.log('等待请求中');},
  // 上传进度事件
  progress: (num, other) => {
    Progress2(num);
    console.log(num);
    console.log('上传进度' + num);
    console.log("上传类型" + other.type);
    console.log("已经上传" + other.current);
    console.log("剩余上传" + other.surplus);
    console.log("已用时间" + other.usetime);
    console.log("预计时间" + other.totaltime);
  },
  // 检查地址回调,用于判断文件是否存在,类型,当前上传的片数等操作
  check_success: (res) => {
    let data = res ? eval('(' + res + ')') : '';
    let status = data.status;
    let url = data.url;
    let msg = data.message;
    // 错误提示
    if (status == 1 ) {
      alert(msg);
      return false;
    }
    // 已经上传
    if (status == 2) {
      alert('文件已存在');
      return false;
    }
    // 如果提供了这个参数,那么将进行断点上传的准备
    if(data.file_index){
      // 起始上传的切片要从1开始
      let file_index = data.file_index ? parseInt(data.file_index) : 1;
      // 设置上传切片的起始位置
      up.set_shard(file_index);
    }
    // 如果接口没有错误,必须要返回true,才不会终止上传
    return true;
  },
  // 上传成功回调,回调会根据切片循环,要终止上传循环,必须要return false,成功的情况下要始终返回true;
  success: (res) => {
    let data = res ? eval('(' + res + ')') : '';
    let url = data.url + "?" + Math.random();
    let file_index = data.file_index ? parseInt(data.file_index) : 1;
    if (data.status == 2) {alert('上传完成');}
    // 如果接口没有错误,必须要返回true,才不会终止上传循环
    return true;
  }
});



相关链接

官方地址 :http://fcup.lovefc.cn/

GitHub 地址 :https://github.com/lovefc/fcup2

Gitee 地址 :https://gitee.com/lovefc/fcup2