使用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 相关文章推荐
jQuery 注意事项 与原因分析
Apr 24 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
JS 表单验证大全
Nov 23 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
JS多个表单数据提交下的serialize()应用实例分析
Aug 27 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 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初学者头疼问题总结
2006/10/09 PHP
PHP编码转换
2012/11/05 PHP
PHP实现基于文本的摩斯电码生成器
2016/01/11 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
php生成mysql的数据字典
2016/07/07 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
2014/10/17 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
CSS或者JS实现鼠标悬停显示另一元素
2016/01/22 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Three.js实现3D机房效果
2018/12/30 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
pyqt5 实现 下拉菜单 + 打开文件的示例代码
2019/06/20 Python
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
英国时尚和家居用品零售商:Matalan
2021/02/28 全球购物
大学生演讲稿范文
2014/01/11 职场文书
理财学专业自荐书
2014/06/28 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
信息合作协议书
2014/10/09 职场文书
2015年高校图书馆工作总结
2015/04/30 职场文书
初一军训感言
2015/08/01 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers
分享7个 Python 实战项目练习
2022/03/03 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python