jquery.fcup.js jquery文件切片上传插件-BFW插件库

jquery.fcup.js jquery文件切片上传插件

使用方法

第一步引入bfwone

第二步执行插件，具体配置说明

 $.fcup({

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

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

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

                    upUrl: 'http://fcphp.cn/fcup/php/file.php', //文件上传接口

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

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

                        // 状态
                        var status = res.status;
                        // 信息
                        var msg = res.message;
                        // url
                        var url = res.url + "?" + Math.random();

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

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

                        // 接口返回错误
                        if (status == 0) {
                            // 停止上传并且提示信息
                            $.upStop(msg);
                        }
                    },

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

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

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

                });

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <style>
@font-face {
        font-family: 'logo';
        src: url('./logo.ttf');
    }

        .logo {
            font-size: 25px;
            font-family: "logo";
        }

        .csbg {
            background-image: linear-gradient(toright, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
        }
    </style>



    <script type="text/javascript">
        // 进度条
        function Progress(value) {
            $('#myProgress').css('width', value + '%');
        }

        function CloseDialog() {
            $('#mydialog').hide();
        }
        bready(function() {
            use(["jquery.fcup","fcup"], function() {
                $.fcup({

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

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

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

                    upUrl: 'http://fcphp.cn/fcup/php/file.php', //文件上传接口

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

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

                        // 状态
                        var status = res.status;
                        // 信息
                        var msg = res.message;
                        // url
                        var url = res.url + "?" + Math.random();

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

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

                        // 接口返回错误
                        if (status == 0) {
                            // 停止上传并且提示信息
                            $.upStop(msg);
                        }
                    },

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

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

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

                });
            });
        });
    </script>
</head>
<body>
    <!-- 弹出框 -->
    <div style="position: fixed;width:100%;">
        <div class="dialog-win" id="mydialog" style="z-index: 11; top: 10px;display: none;">
            <div class="dialog open">
                <div class="dialog-head">
                    <span class="close rotate-hover" onClick="CloseDialog()"></span><strong>图片预览</strong>
                </div>
                <div class="dialog-body">
                    <img src="" id="pic" class="img-responsive" alt="响应式图片" />
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="view-body">
            <div class="keypoint bg-blue bg-inverse radius text-center csbg">
                <a href="https://gitee.com/lovefc/fcup" target="_blank">
                    <h1 class="logo">
                        fcup.js
                    </h1>
                </a>
                <p>
                    fcup.js-简单，方便的大文件切片上传jquery插件
                </p>
                <p>
                    <br />
                    <button class="button bg-main button-big icon-arrow-circle-up" id="upid">
                        立即上传</button>
                </p>
            </div>
            <div class="progress progress-small">
                <div class="progress-bar bg-yellow" id="myProgress" style="width: 0%;">
                </div>
            </div>
        </div>

        <div class="view-body">
            <div class="panel">
                <div class="panel-head">
                    <strong>更新说明</strong>
                </div>
                <ul class="list-group">
                    <li> 2018/01/08 ： 添加了对于接口返回结果的回调，添加了对于上传表单id的指定</li>
                    <li> 2018/01/17 : 优化了分片异步处理,队列执行接口,修复细节 </li>
                    <li> 2018/05/02 : 添加了文件大小的判断,添加了对于文件md5的计算,添加了终止函数,传值到后台使用,优化细节部分 </li>
                    <li> 2019/05/21 ： 分离了原来的进度动画，现在用户可以自定义自己的动画和按钮，分别提供了各种回调事件以便处理 </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<!--  fcup.js  -->



</body>
</html>

jquery.fcup.js jquery文件切片上传插件

网友评论0

plupload.js

dropzone.js

webuploader.js

jquery.imageuploader.js

filedrop.js

jquery.fcup.js