使用pcs api往免费的百度网盘上传下载文件的方法


Posted in Javascript onMarch 17, 2016

百度个人云盘空间大,完全免费,而且提供了pcs api供调用操作文件,在平时的项目里往里面保存一些文件是很实用的。

环境准备:

开通读写网盘的权限及获取access_token:http://blog.csdn.net/langyuezhang/article/details/47206621

百度官方pcs api文档:http://developer.baidu.com/wiki/index.php?title=docs/pcs/overview,上面有各种语言的SDK,我用的laravel5,直接导里面的php SDK还用不了,稍做了修改才能用的。

看完上面两篇文章,基本就可以使用了,下面贴出写直接把用户选择的图片预览然后upload到网盘,上传的api:
https://pcs.baidu.com/rest/2.0/pcs/file?method=upload&path=%2fapps%2wp2pcs%2f1.JPG&access_token=***红色部分是固定的,因为只允许上传到这个目录下,实际对应到网盘的目录是我的网盘/我的应用数据/wp2pcs、,无需先创建目录再上传文件,只需要指定路径,它会自动创建,如你想把图片上传到/apps/wp2pcs/img下,path就写/apps/wp2pcs/img/1.jpg就可以了。下面是把用户在网页上选择的图片,预览后直接上传到网盘的代码,参照了网上的例子:预览:

//图片上传预览 IE是用了滤镜。
function previewImage(file, product)
{
getPhotopty();
console.log("previewImage");
uploadAndSubmit(product);
var div = document.getElementById('preview' + product);
var fileName = file.value;
//upload();
if (file.files)
{
var i = 0;
var funAppendImage = function () {
var _file = file.files[i];
if (_file) {
var reader = new FileReader()
reader.onload = function (evt) {
fileName = _file.name;
div.innerHTML += '<div class="col-xs-6 col-md-3"><a style="float:right;cursor:pointer;" onclick="del(this)">X</a><div class="thumbnail"><img id=imghead' + product + fileName + '></div></div>';
var img = document.getElementById('imghead' + product + fileName);
img.src = evt.target.result;
i++;
funAppendImage();
}
reader.readAsDataURL(_file);
}
};
funAppendImage();
}
$('#coverBg').show();
$('#coverDiv').show();
//$("#uploadFrm" + product).submit();
}

上传:

var access_token = "***********";
var baseUrl = "https://c.pcs.baidu.com/rest/2.0/pcs/";
function uploadAndSubmit(product) {
console.log("start uploadAndSubmit");
if (typeof FileReader == 'undefined') {
alert("你的浏览器不支持FileReader接口!");
}
var taskName = $("#txtTask").val() + "-" + $("#txtTask2").val();
var form = document.forms["uploadFrm" + product];
console.log("form:" + form);
var fileCtrl = "filectrl" + product;
console.log("filectrl:" + fileCtrl);
//if (form[fileCtrl].files.length > 0)
console.log($("#filectrl" + product)[0]);
if ($("#filectrl" + product)[0].files.length > 0)
{
for (var i = 0; i < $("#filectrl" + product)[0].files.length; i++)
{
var file = form[fileCtrl].files[i];
console.log(file.name);
var filePath = "%2fapps%2fwp2pcs%2f" + taskName + "%2f" + file.name;
console.log("add exif info to db");
getExifIinfo(taskName, file, product, filePath);
//document.getElementById("bytesRead").textContent = file.size;
console.log("start XMLHttpRequest");
var xhr = new XMLHttpRequest();
console.log(access_token);
var url = baseUrl + "file?method=upload&path=%2fapps%2fwp2pcs%2f" + taskName + "%2f" + file.name + "&access_token=" + access_token + "&ondup=overwrite&count=" + i;
console.log(url);
xhr.open("POST", url, true);
var formData = new FormData();
formData.append("file", file);
console.log("onreadystatechange");
xhr.onreadystatechange = function () {
console.log("onreadystatechange start");
//console.log(xhr.status);
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("upload complete");
console.log("response: " + xhr.responseText);
var result = $.parseJSON(xhr.responseText);
if (result.hasOwnProperty("path"))
{
$("#reusltMsg").append('<div class="alert alert-success" role="alert"> 上传成功.</div>');
} else
{
$("#reusltMsg").append('<div class="alert alert-danger" role="alert"> 上传失败.</div>');
}
} else
{
$("#reusltMsg").append('<div class="alert alert-danger" role="alert"> 上传失败(200).</div>');
}
}
$('#coverBg').hide();
$('#coverDiv').hide();
}
xhr.send(formData);
}
} else
{
alert("Please choose a file.");
$('#coverBg').hide();
$('#coverDiv').hide();
}
}
Javascript 相关文章推荐
jquery.validate使用攻略 第三部
Jul 01 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
setInterval计时器不准的问题解决方法
May 08 Javascript
jQuery封装的tab选项卡插件分享
Jun 16 Javascript
使用Chart.js图表库制作漂亮的响应式表单
Oct 28 Javascript
Js实现简单的小球运动特效
Feb 18 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
vue实现菜单切换功能
May 08 Javascript
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
JavaScript 与 TypeScript之间的联系
Nov 27 Javascript
Fullpage.js固定导航栏-实现定位导航栏
Mar 17 #Javascript
基于socket.io+express实现多房间聊天
Mar 17 #Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 #Javascript
教你用javascript实现随机标签云效果_附代码
Mar 16 #Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 #Javascript
js纯数字逐一停止显示效果的实现代码
Mar 16 #Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 #Javascript
You might like
PHP与javascript的两种交互方式
2006/10/09 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php使用PDO方法详解
2014/12/27 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php服务器的系统详解
2019/10/12 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
javascript 对象比较实现代码
2009/04/27 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
Jquery AJAX POST与GET之间的区别
2013/11/14 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jQuery统计上传文件大小的方法
2015/01/24 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
vue各种事件监听实例(小结)
2020/06/24 Javascript
Python的Flask框架中@app.route的用法教程
2015/03/31 Python
Python秒算24点实现及原理详解
2019/07/29 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
银行实习人员自我鉴定
2013/09/22 职场文书
奶茶店创业计划书范文
2014/01/17 职场文书
项目投资建议书
2014/05/16 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
个人道歉信大全
2019/04/11 职场文书