使用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 相关文章推荐
9个javascript语法高亮插件 推荐
Jul 18 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JavaScript基础之AJAX简单的小demo
Jan 29 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
Apr 10 Javascript
表格展示利器 Bootstrap Table实例代码
Sep 06 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
对layui中table组件工具栏的使用详解
Sep 19 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
jQuery插件开发基础简单介绍
2013/01/07 Javascript
JavaScript中变量声明有var和没var的区别示例介绍
2014/09/15 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
Vue-Router2.X多种路由实现方式总结
2018/02/09 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Vue退出登录时清空缓存的实现
2019/11/12 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
利用aardio给python编写图形界面
2017/08/21 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
python实现图片筛选程序
2018/10/24 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
python dumps和loads区别详解
2020/02/04 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
新东网科技Java笔试题
2012/07/13 面试题
外企求职信范文分享
2013/12/31 职场文书
出国留学介绍信
2014/01/13 职场文书
诚信考试承诺书
2014/03/27 职场文书
好听的队名和口号
2014/06/09 职场文书
管理标语大全
2014/06/24 职场文书