使用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跨域和ajax 跨域问题的实现思路
Sep 05 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
Sep 26 Javascript
利用谷歌地图API获取点与点的距离的js代码
Oct 11 Javascript
jquery ajax 简单范例(界面+后台)
Nov 19 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
Dec 05 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
微信小程序 实战实例开发流程详细介绍
Jan 05 Javascript
javascript json字符串到json对象转义问题
Jan 22 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文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
兼容PHP和Java的des加密解密代码分享
2014/06/26 PHP
ThinkPHP3.2.2的插件控制器功能简述
2014/07/09 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
php获取文件名称和扩展名的方法
2017/02/07 PHP
php实现用户登陆简单实例
2017/04/04 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick
2009/02/04 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
JavaScript实现拖拽盒子效果
2020/02/06 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
详解supervisor使用教程
2017/11/21 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python自动化报告的输出用例详解
2018/05/30 Python
使用Python横向合并excel文件的实例
2018/12/11 Python
pytorch中图像的数据格式实例
2020/02/11 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
购房委托书
2014/10/15 职场文书
大学军训决心书
2015/02/05 职场文书
大连导游词
2015/02/12 职场文书