使用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实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
jquery密码强度校验
Dec 02 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
Vue前端开发规范整理(推荐)
Apr 23 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
Aug 09 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 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
一个可以删除字符串中HTML标记的PHP函数
2006/10/09 PHP
非常不错的MySQL优化的8条经验
2008/03/24 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现微信发红包程序
2015/08/24 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
php session_decode函数用法讲解
2019/05/26 PHP
PHP面向对象程序设计中的self、static、parent关键字用法分析
2019/08/14 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
javacript使用break内层跳出外层循环分析
2015/01/12 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
javascript中Object使用详解
2015/01/26 Javascript
jQuery实现左右切换焦点图
2015/04/03 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
Python的Django框架中的表单处理示例
2015/07/17 Python
python的exec、eval使用分析
2017/12/11 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
python3+PyQt5实现柱状图
2018/04/24 Python
python执行精确的小数计算方法
2019/01/21 Python
PyQt5图形界面播放音乐的实例
2019/06/17 Python
django之对FileField字段的upload_to的设定方法
2019/07/28 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
python中温度单位转换的实例方法
2020/12/27 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
小学英语教学反思案例
2014/02/04 职场文书
森林防火工作方案
2014/02/14 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
地道战观后感
2015/06/04 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android