百度个人云盘空间大,完全免费,而且提供了 pcs api 供调用操作文件,在平时的项目里往里面保存一些文件是很实用的。通过本文给大家介绍使用 pcs api 往免费的百度网盘上传下载文件的方法,感兴趣的朋友一起学习吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
百度个人云盘空间大,完全免费,而且提供了 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=/apps%2wp2pcs/1.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 = "/apps/wp2pcs/" + taskName + "/" + 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=/apps/wp2pcs/" + taskName + "/" + 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();
- }
- }
来源: http://www.phperz.com/article/17/0219/266670.html