使用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 相关文章推荐
用JS实现一个页面多个css样式实现
May 29 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
IE6 fixed的完美解决方案
Mar 31 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
vue.js指令v-model使用方法
Mar 20 Javascript
vue better-scroll插件使用详解
Jan 25 Javascript
微信小程序tabbar底部导航
Nov 05 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
微信小程序实现类似微信点击语音播放效果
Mar 30 Javascript
javascript全局自定义鼠标右键菜单
Dec 08 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
论建造顺序的重要性
2020/03/04 星际争霸
memcache命令启动参数中文解释
2014/01/13 PHP
PHP利用imagick生成组合缩略图
2016/02/19 PHP
在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析
2016/03/06 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
JS与HTML结合实现流程进度展示条思路详解
2017/09/03 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
wxPython中listbox用法实例详解
2015/06/01 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
2014自荐信的写作技巧
2014/01/28 职场文书
公司薪酬管理制度
2014/01/31 职场文书
windows下快速安装nginx并配置开机自启动的方法
2021/05/11 Servers
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers