83

GitHub - lovefc/fcup: jquery大文件分片上传插件-fcup.js

 6 years ago
source link: https://github.com/lovefc/fcup
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

fcup.js

此版本已不在更新,新版本请移步至 https://gitee.com/lovefc/fcup2

fcup.js是一款支持大文件切片上传插件。该jquery插件使用简单,配置简单明了,支持上传类型指定,支持自定义各种事件处理,完全可以用来打造属于个性的文件上传功能。

avatar

直接下载源码,演示地址: http://fcphp.cn/fcup

    $.fcup({

         upId: 'upid', //上传dom的id

         upShardSize: '1', //切片大小,(单次上传最大值)单位M,默认2M

         upMaxSize: '20', //上传文件大小,单位M,不设置不限制

         upUrl: './php/file.php', //文件上传接口

         upType: 'jpg,png,jpeg,gif', //上传类型检测,用,号分割

         //接口返回结果回调,根据结果返回的数据来进行判断,可以返回字符串或者json来进行判断处理
         upCallBack: function (res) {

            var status = res.status;

            var msg = res.message;

            // 已经完成了
            if (status == 2) {
               alert(msg);
               $('#pic').attr("src", res.url);
               $('#pic').show();
            }

            // 还在上传中
            if (status == 1) {
               console.log(msg);
            }

            // 接口返回错误
            if (status == 0) {
               // 停止上传触发$.upStop函数
               $.upErrorMsg(msg);
            }
            
            // 已经上传过了
            if (status == 3) {
               Progress(100);
               $('#pic').attr("src", res.url);
               $('#pic').show();
               // 停止上传触发$.upStop函数
               $.upErrorMsg(msg);
            }            
         },

         // 上传过程监听,可以根据当前执行的进度值来改变进度条
         upEvent: function (num) {
            // num的值是上传的进度,从1到100
            Progress(num);
         },

         // 发生错误后的处理
         upStop: function (errmsg) {
            // 这里只是简单的alert一下结果,可以使用其它的弹窗提醒插件
            alert(errmsg);
         },

         // 开始上传前的处理和回调,比如进度条初始化等
         upStart: function () {
            Progress(0);
            $('#pic').hide();
            alert('开始上传');
         }

      });

2018/1/8 : 添加了对于接口返回结果的回调,添加了对于上传表单id的指定

2018/1/10 : 添加了node.js的上传接口,基于express框架

2018/1/17 : 优化了分片异步处理,队列执行接口,修复细节

2018/5/02 : 添加了文件大小的判断,添加了对于文件md5的计算,添加了终止函数,传值到后台使用,优化细节部分

2019/5/21 : 分离了原来的进度动画,现在用户可以自定义自己的动画和按钮,分别提供了各种回调事件以便处理

2019/8/12 : 修复了获取md5值的bug,感谢Matty的提醒

2019/10/22: 修改了终止事件循环执行的bug


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK