最近在做的项目,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("上传失败!")
});
选中文件后,会自动上传文件