使用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 相关文章推荐
早该知道的7个JavaScript技巧
Mar 27 Javascript
JS实现切换标签页效果实例代码
Nov 01 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery验证插件validation使用指南
Apr 21 Javascript
浅析js绑定事件的常用方法
May 15 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
TypeScript学习之强制类型的转换
Dec 27 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
小程序数据通信方法大全(推荐)
Apr 15 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
基于jquery的finkyUI插件与Ajax实现页面数据加载功能
2010/12/03 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
2017/01/23 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
JavaScript实现PC端横向轮播图
2020/02/07 Javascript
实现vuex原理的示例
2020/10/21 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
深入分析python数据挖掘 Json结构分析
2018/04/21 Python
Python单元测试实例详解
2018/05/25 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
交通事故死亡赔偿协议书
2014/12/03 职场文书
英文感谢信范文
2015/01/21 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
win7配置本地ftp服务器的图文教程
2022/08/05 Servers