FEX

让web开发更迅速、简单。

您的位置:首页 - 功能类组件列表 - 功能类组件详情

七牛上传组件

2017-01-04 10:59:27

主资源 CDN 域名

    
        <script src="//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/assets/js/moxie.min.js"></script>
<script src="//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/assets/js/plupload.min.js"></script>
<script src="//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/assets/js/zh_CN.js"></script>
<script src="//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/assets/js/qiniu.min.js"></script>
<script src="//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/assets/js/uploadQiniu.js"></script> //JS整合版本(不兼容ie9以下版本) <script src="//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/assets/js/uploadQiniu.min.js"></script>

DEMO

完整版:兼容ie7 +、FF、chrome、移动端

//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/upload.html

整合版(合并所有JS):兼容ie9 +、FF、chrome、移动端

//zhcdn01.xoyo.com/xassets/com/pf/upqiniu/upload.min.html

使用说明

  • 需要加载jquery 1.7.2 或者 zepto
  • 如果要兼容IE版本,swf必须为本地路径,因为会出现跨域问题
  • 后端接口返回的数据格式必须满足下面格式

    /*
    * 注意:请求token的后端接口,必须为以下格式
    * 因为 上传token与key 是在接口回调里面按照下面的方式获取的
    *
    * option.uptoken = $data.data.input_values.token;
    * option.upkey = $data.data.input_values.key;
    */
    {
        "status": 1,
        "message": "",
        "data": {
            "action": "http://up.qiniu.com",
            "input_file_name": "file",
            "input_values": {
                "token": "AUsWmwjd0VwZJP8mIH7jlMlR0Iy-YwqRGivBrYfp:niwoRWdaQXmBK5Q-f6fgCMLOiIo=:eyJyZXR1cm5VcmwiOiIiLCJyZXR1cm5Cb2R5Ijoie30iLCJjYWxsYmFja0hvc3QiOiIiLCJjYWxsYmFja1VybCI6Imh0dHA6XC9cL3Rlc3Qud3MueG95by5jb21cL2NvcmVcL3VwbG9hZFwvcWluaXVfY2FsbGJhY2siLCJjYWxsYmFja0JvZHkiOiJidW5kbGU9anhzanp0JmZpbGVfaWQ9ZmE3ZTNhY2JiYjJjMWIwYzcwY2YzMDNiYzZjZGI5ZTcmZmlsZV9uYW1lPSQoZm5hbWUpJmZpbGVfc2l6ZT0kKGZzaXplKSZmaWxlX21pbWVfdHlwZT0kKG1pbWVUeXBlKSZmaWxlX2hhc2g9JChldGFnKSIsImluc2VydE9ubHkiOjEsImRldGVjdE1pbWUiOjEsImZzaXplTGltaXQiOjIwOTcxNTIwLCJtaW1lTGltaXQiOiJpbWFnZVwvanBlZztpbWFnZVwvanBlZztpbWFnZVwvZ2lmO2ltYWdlXC9wbmciLCJzY29wZSI6Inhzamd3Omp4c2p6dFwvanhtb2JpbGUyX3BpY3R1cmUxNjEyMDZcLzZmXC9hMVwvNmZhMTVlZjVmM2M3MzA4ZTJjOGQxN2E2NWUwZjBmYzIiLCJkZWFkbGluZSI6MTQ4MzUwMTA5OH0=",
                "key": "jxsjzt/jxmobile2_picture161206/6f/a1/6fa15ef5f3c7308e2c8d17a65e0f0fc2",
                "domain": "http://7xq4h6.com1.z0.glb.clouddn.com"
            },
            "app_session": "f1b4974b27f8d8658f571a43b679791b9103dd2e"
        }
    }

    */

参数说明


    btnId:'',      //按钮ID,例如  button 不要加#号
    ajaxUrl:'',    //接口网址,返回的json必须统一格式
    domain:'http://7xq4h6.com1.z0.glb.clouddn.com',   //下载资源用bucket 一般默认这个
    fileSize:'10M',   //最大文件大小
    swfUrl: 'assets/swf/Moxie.swf', //兼容ie 为本地url
    filetype:'jpg,jpeg,gif,png',  //文件格式,不只是图片,也可以是其他文件类型
    cbBeforeup: function(){  //上传前回调

    },
    cbPercent: function($percent){    //上传进行时 参数是百分比

    },
    fileUploaded: function($imglink){  //上传成功后 参数为成功后返回的图片路径

    },
    uploadComplete: function($file_id){     //上传完成  file_id回传给后端 用于保存图片信息

    }