apicloud apicloud

注册
查看: 2575|回复: 6

[APP开发技巧] apicloud WebUpLoader JSON 上传文件到file表实例(适用所有网页)

驾校小白

UID:104867

主题:
6
帖子:
13
云币:
104

[APP开发技巧] apicloud WebUpLoader JSON 上传文件到file表实例(适用所有网页)

2575 6 | 发表于 2015-7-7 13:56:19 |阅读模式 | |
本帖最后由 ghostljj 于 2015-7-9 00:06 编辑

这个实例,可以添加到apicloud的file表,同时可以插入到带file类型的文件表,具体表自己创建
a、jquery.js
b、webuploader.js webuploader.css
c、appkey加密需要用到 jquery.sha1  算法网上自己下载
网上自己下载百度一下都有。

1、定义js css
    <script type="text/javascript" src="../../script/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../../script/jquery.sha1.js"></script>
    <link rel="stylesheet" type="text/css" href="../../script/webuploader-0.1.5/webuploader.css" />
    <script type="text/javascript" src="../../script/webuploader-0.1.5/webuploader.js"></script>
2、自定义部分按钮和进度条(可自己修改)
<style type='text/css'>
.btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.wu-example {
    position: relative;
    padding: 45px 15px 15px;
    margin: 15px 0;
    background-color: #fafafa;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, .05);
    border-color: #e5e5e5 #eee #eee;
    border-style: solid;
    border-width: 1px 0;
}

.wu-example:after {
    content: "测试";
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    font-weight: bold;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.uploader-list {
    width: 100%;
    overflow: hidden;
}

.btn:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px
}

.btn:hover,
.btn:focus {
    color: #333;
    text-decoration: none
}

.btn:active,
.btn.active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125)
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none
}

.btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad
}

.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
    background-image: none
}

.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
    background-color: #fff;
    border-color: #ccc
}

.btn-default .badge {
    color: #fff;
    background-color: #fff
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width .6s ease;
    transition: width .6s ease
}

.progress {
    height: 20px;
    width: 30%;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1)
}

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #428bca;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    -webkit-transition: width .6s ease;
    transition: width .6s ease
}

.progress-striped .progress-bar {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px
}

.progress.active .progress-bar {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite
}

.progress-bar-success {
    background-color: #5cb85c
}

.progress-striped .progress-bar-success {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
}

.progress-bar-info {
    background-color: #5bc0de
}

.progress-striped .progress-bar-info {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
}

.progress-bar-warning {
    background-color: #f0ad4e
}

.progress-striped .progress-bar-warning {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
}

.progress-bar-danger {
    background-color: #d9534f
}

.progress-striped .progress-bar-danger {
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent)
}
.remove-this{
    cursor: pointer;
    float: right;
}
</style>

3、body下添加
        <div id="uploaderDemo" class="wu-example">
            <!--用来存放文件信息-->
            <div id="thelist" class="uploader-list"></div>
            <div class="btns">
                <div id="picker1">选择文件</div>
                <button id="ctlBtn1" class="btn btn-default">开始上传</button>
            </div>
        </div>

4、webuploader 操作
    <script type='text/javascript'>
        var appid  = 'A69809******47';
        var appkey = '6FE6D0FF-C775-5DF4-CA78-******4568';
        var now    = Date.now();
        appkey = SHA1(appid + "UZ" + appkey + "UZ" + now) + "." + now;

        jQuery(function() {//这个只是放在里面好管理而已,不放也可以。不过多个上传插件最后这样,不然变量定义麻烦
                var $ = jQuery,
                        $list = $('#thelist'),
                        $btnUpdata = $('#ctlBtn1'),
                        // 优化retina, 在retina下这个值是2
                        ratio = window.devicePixelRatio || 1,
                        thumbnailWidth = 100 * ratio,
                        thumbnailHeight = 100 * ratio,
                        pickIdName = "#picker1",
                        uploadurl;

                uploadurl = WebUploader.create({
                        //pick: pickIdName, // 选择文件的按钮。可选。// 内部根据当前运行是创建,可能是input元素,也可能是flash.
                        pick: {
                                id: pickIdName,
                                innerHTML: '点击选择图片'
                        },
                        swf: '../../script/webuploader-0.1.5/Uploader.swf', // swf文件路径
                        server: 'http://d.apicloud.com/mcm/api/file', // 文件接收服务端。
                        resize: false, // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
                        //auto: true, //自动上传无需点击
                        //accept: {// 只允许选择图片文件。
                        //         title: 'Images',
                        //         extensions: 'gif,jpg,jpeg,bmp,png',
                        //         mimeTypes: 'image/*'
                        // }
                });
                uploadurl.on('uploadBeforeSend', function(block, data, headers) {
                        headers["X-APICloud-AppKey"] = appkey;
                        headers["X-APICloud-AppId"] = appid;
                });
                 uploadurl.on("fileQueued", function(file) {
                        var $li = $('<div id="' + file.id + '" class="item">' +
                                '<img>' +
                                '<h4 class="info">' + file.name + '</h4>' +
                                '<p class="state">等待上传...</p>' +
                                '</div>');
                        var $img = $li.find('img');

                        $list.append($li)

                        // 创建缩略图
                        // 如果为非图片文件,可以不用调用此方法。
                        // thumbnailWidth x thumbnailHeight 为 100 x 100
                        uploadurl.makeThumb(file, function(error, src) {
                                if (error) {
                                        //$img.replaceWith('<span>不能预览</span>');
                                        return;
                                }
                                $img.attr('src', src);
                        }, thumbnailWidth, thumbnailHeight);


                        uploadurl.option('formData', {
                                filename: file.name, //新文件名
                                type: file.type //文件类型
                        });
                });
                //文件上传成功
                uploadurl.on('uploadSuccess', function(file, res) {
                        if (res && res.id) {
                                // var fileRes = {
                                //         id: res.id,
                                //         name: res.name,
                                //         url: res.url
                                // };
                                // $.ajax({
                                //         "url": 'https://d.apicloud.com/mcm/api/news/',
                                //         'type': "POST",
                                //         "method": "POST",
                                //         "cache": false,
                                //         'dataType': 'json',
                                //         "headers": {
                                //                 "X-APICloud-AppId": appid,
                                //                 "X-APICloud-AppKey": appkey
                                //         },
                                //         "data": {
                                //                 "title": "标题添加测试aa",
                                //                 "content": "内容添加测试aa",
                                //                 'filename': fileRes //file类型的列
                                //         },
                                //         success: function(data, status, header) {
                                //                 $('#' + file.id).find('p.state').text('已上传');
                                //         },
                                //         error: function(xhr, type) {}
                                // });
                                $('#' + file.id).find('p.state').text('已上传');
                        } else if (res && res.status == 0) {
                                alert("失败" + JSON.stringify(res))
                        } else {
                                alert("失败")
                        }
                });
                //文件上传失败
                uploadurl.on('uploadError', function(file, reason) {
                        $('#' + file.id).find('p.state').text('上传出错');
                });
                //上传完成,不管成功失败
                uploadurl.on('uploadComplete', function(file) {
                        $('#' + file.id).find('.progress').fadeOut(); //方法使用淡出效果来隐藏被选元素,假如该元素是隐藏的。
                        uploadurl.removeFile(file, true);
                });
                //上传中
                uploadurl.on('uploadProgress', function(file, percentage) {
                        //$('#uploaderInfo').html(percentage);
                        var $li = $('#' + file.id),
                                $percent = $li.find('.progress .progress-bar');

                        // 避免重复创建
                        if (!$percent.length) {
                                $percent = $('<div class="progress progress-striped active">' +
                                        '<div class="progress-bar" role="progressbar" style="width: 0%"></div>' +
                                        '<div class="remove-this">X</div>' +
                                        '</div>').appendTo($li).find('.progress-bar');

                                $li.on('click', '.remove-this', function() {
                                        uploadurl.removeFile(file, true);

                                        $list.find('div#' + file.id + '').replaceWith('');
                                })
                        }
                        $li.find('p.state').text('上传中');
                        $percent.css('width', percentage * 100 + '%');

                });

                var state = '';
                uploadurl.on('all', function(type) {
                        if (type === 'startUpload') {
                                state = 'uploading';
                        } else if (type === 'stopUpload') {
                                state = 'paused';
                        } else if (type === 'uploadFinished') {
                                state = 'done';
                        }

                        if (state === 'uploading') {
                                $btnUpdata.text('暂停上传');
                        } else {
                                $btnUpdata.text('开始上传');
                        }
                });
                $btnUpdata.on('click', function() {
                        if (state === 'uploading') {
                                uploadurl.stop(true);
                        } else {
                                uploadurl.upload();
                        }
                });
        });
    </script>

//如果有错漏,请告知。谢谢

1

查看全部评分

新手上路

UID:118178

主题:
19
帖子:
79
云币:
95
发表于 2015-10-23 14:07:18 |
没有错漏,谢谢您的分享,本来估计得两三小时折腾的,托您的福直接解决了~

转正司机

UID:134779

主题:
27
帖子:
195
云币:
505
发表于 2015-10-23 17:51:15 来自手机 |
真要相关的介绍呢,谢谢分享

实习司机

UID:164493

主题:
1
帖子:
177
云币:
833
发表于 2015-10-24 09:50:44 |
受教了!

主题:
2
帖子:
5
云币:
11
发表于 2016-1-20 18:16:37 |
uploadurl = WebUploader.create提示这里WebUploader没定义,请问怎么回事啊。

新手上路

UID:146970

主题:
1
帖子:
3
云币:
100
发表于 2016-4-5 17:23:18 |
可以断点续传吗?

驾校小白

UID:681928

主题:
8
帖子:
33
云币:
51
发表于 2018-9-19 09:38:06 |
失败{"status":0,"result":{"msg":"invalid request."},"_raw":"{\"status\":0,\"result\":{\"msg\":\"invalid request.\"}}"}
这个是怎么回事?
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表