使用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 相关文章推荐
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
详解基于Vue+Koa的pm2配置
Oct 24 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
实例讲解JavaScript预编译流程
Jan 24 Javascript
JavaScript 防盗链的原理以及破解方法
Dec 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语法(4)
2006/10/09 PHP
FCKeditor添加自定义按钮
2008/03/27 PHP
php中mysql模块部分功能的简单封装
2011/09/30 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
NodeJS学习笔记之Connect中间件应用实例
2015/01/27 NodeJs
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
JS实现动画兼容性的transition和transform实例分析
2016/12/13 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
从零学习node.js之搭建http服务器(二)
2017/02/21 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[54:25]Ti4 循环赛第三日LGD vs MOUZ
2014/07/12 DOTA
python搭建简易服务器分析与实现
2012/12/15 Python
Python基类函数的重载与调用实例分析
2015/01/12 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
详解python之多进程和进程池(Processing库)
2017/06/09 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
如何利用python进行时间序列分析
2020/08/04 Python
python drf各类组件的用法和作用
2021/01/12 Python
CSS3中新增的对文本和字体的设置
2020/02/03 HTML / CSS
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
金智子午JAVA面试题
2015/09/04 面试题
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
中文系师范生自荐信
2013/10/01 职场文书
工程业务员工作职责
2013/12/07 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
廉洁校园实施方案
2014/05/25 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Win11跳过联网界面创建本地管理账户的3种方法
2022/04/20 数码科技