apicloud使用WebUploader上传文件到云端数据库

最近在做的项目,app部分用apicloud,后台web服务部分用的是jsp,数据库用的都是apicloud云端数据库,在web服务器端要用到上传文件到apicloud云端数据库中,根据apicloud的文档,使用百度的webuploader,废话不多说,代码如下:

百度webuploader下载地址:
http://fex.baidu.com/webuploader/

1.引用相关文件


<link rel="stylesheet" type="text/css" href="/webuploader-0.1.5/webuploader.css">
<script type="text/javascript" src="/webuploader-0.1.5/webuploader.js"></script>

2.html代码

<!-- 显示上传按钮 -->
<div id="picker">选择文件</div>
3.js代码
var uploadurl = WebUploader.create({
        pick: "#picker",//绑定dom的id
        swf: '/webuploader-0.1.5/Uploader.swf',//flash地址
        server: 'http://d.apicloud.com/mcm/api/file',//
        resize: false,
        auto: true,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',//过滤上传文件后缀
            mimeTypes: 'image/*'
        }
    });
    uploadurl.on("fileQueued", function (file) {
        //alert(file.name+"-"+file.type);
        uploadurl.option('formData', {
            filename: file.name,
            type: file.type
        });
    });

    uploadurl.on('uploadBeforeSend', function (block, data, headers) {
        //alert('uploadBeforeSend');
        var now = Date.now();
        var appKey = SHA1(APICLOUD_ID+"UZ"+APICLOUD_KEY+"UZ"+now)+"."+now;
        headers["X-APICloud-AppKey"] = appKey;//加密的appkey
        headers["X-APICloud-AppId"] = APICLOUD_ID;//你的appid
    });

    uploadurl.on('startUpload',function(file,percentage){
        //alert('uploadProgress');
        //用到layer的loading弹出层
        layer.msg('上传中...', {
            icon: 16
            ,shade: 0.01
        });
    });
    //上传中
    /*
    uploadurl.on('uploadProgress',function(file,percentage){
        //alert('uploadProgress');
        layer.msg('上传中...', {
            icon: 16
            ,shade: 0.01
        });
    });
    */
    //上传完成,不管成功失败
    uploadurl.on('uploadComplete', function (file) {
        //alert('uploadComplete');
        //关闭layer的loading弹出层
        layer.closeAll('loading');
        uploadurl.removeFile(file);
    });
    //文件上传成功
    uploadurl.on('uploadSuccess', function (file, res) {
        //alert(file);
        //alert(JSON.stringify(res));
        //关闭layer的loading弹出层
        layer.closeAll('loading');
        $('#img_upload').attr('src',res.url);
    });
    //文件上传失败
    uploadurl.on('uploadError', function (file, reason) {
        alert("上传失败!")
    });

选中文件后,会自动上传文件


原文出处:/show_1C7JagBlx32.html