FCUP-大文件切片上传js插件

Javascript 1747 0 2023-03-03

FCUP-大文件切片上传js插件

一个轻巧的js类库,用于在网页端上传大文件,大图片,可以设置多个上传参数,提供了多种回调.

可以任意绑定id,自动生成上传表单,可以自定义文件头,其它参数,设置最大上传,最小上传,以及判断上传类型.

现在已经支持断点续传,并且有详细的操作案例

官网:http://fcup.lovefc.cn

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

Github:https://github.com/lovefc/fcup2


使用教程

直接下载源码或者使用git克隆

备注:新版本的demo使用了sqlite数据库,注意php环境有没有sqlite扩展,另外上传目录要给读写权限

使用方法

   // 上传案例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;
      }
   });


参数详细

参数 类型 默认 备注
id string dom的id
url string 上传到服务器的url
check_url string 检查上传url地址
type string 限制上传类型,多个用,号分割(不区分大小写),为空不限制
shard_size int,float 2 每次分片的大小,单位为M,因为要计算md5,所以如果条件允许,不要设定的太小
min_size int,float 上传文件的最小M数
max_size int,float 上传文件的最大M数
headers object 每次上传附带的文件头,请注意指定header头时将不能进行跨域操作
apped_data object 每次上传附带的其它参数,传递到后台
timeout int 3000 ajax超时时间
error_msg object object 错误提示
start function fucntion 实例化类后的开始事件
before_send function fucntion 等待上传事件
progress function fucntion 上传进度事件
error function fucntion 内部的错误提示函数
check_success function fucntion 检查地址回调,用于判断文件是否存在,类型,改变当前上传的片数等操作
success function fucntion 数据成功传递到后端的事件,这是一个循环事件

常用函数

函数名 说明
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的方式传递到后端

上一篇:axios浏览器中异步请求代码封装

下一篇:SmartPhoto手机/电脑端查看图片插件使用说明文档

讨论数量:0

请先登录再发表讨论。 2024-11-24

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链