使用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 相关文章推荐
Javascript之文件操作
Mar 07 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
Apr 10 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
Express框架之connect-flash详解
May 31 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
Postman无法正常返回结果问题解决
Aug 28 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 根据IP地址控制访问的代码
2010/04/22 PHP
PHP实现服务器状态监控的方法
2014/12/09 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
extjs ColumnChart设置不同的颜色实现代码
2013/05/17 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
解决jquery版本冲突的有效方法
2014/09/02 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
2016/09/23 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
2019/05/22 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python实现获取nginx服务器ip及流量统计信息功能示例
2018/05/18 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
matplotlib subplot绘制多个子图的方法示例
2020/07/28 Python
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
爱心捐助倡议书
2014/05/19 职场文书
技术比武方案
2014/05/19 职场文书
劳模事迹材料范文
2014/12/24 职场文书
业务员岗位职责
2015/02/03 职场文书
工作自我推荐信范文
2015/03/25 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python