How to Use pcsapi to upload and download files to a free Baidu online drive _ javascript skills

Baidu's personal cloud disk has a large space and is completely free of charge. It also provides pcsapi for calling operation files. It is very practical to save some files in projects. This article describes how to use pcsapi to upload and download files to a free Baidu network disk. If you are interested, join us and learn about Baidu's personal cloud disk space, which is free of charge, in addition, the pcs api is provided for calling operation files. It is very practical to save some files in normal projects.

Environment preparation:

Access to read and write Network Disk and get access_token: http://blog.csdn.net/langyuezhang/article/details/47206621

Baidu official pcs api documentation: http://developer.baidu.com/wiki/index.php? Title = docs/pcs/overview. There are sdks in various languages on it. I use laravel5 and direct the php SDK in it is useless. It can be used only after a slight modification.

After reading the above two articles, you can basically use them. Below I will post an api to preview the selected image and upload it to the online storage:
Https://pcs.baidu.com/rest/2.0/pcs/file? Method = upload & path = % 2 fapps % 2wp2pcs % 2f1. JPG & access_token = *** the red part is fixed because it can only be uploaded to this directory, the actual directory corresponding to the online storage is my online storage/my application data/wp2pcs. You do not need to create a directory before uploading files. Instead, you only need to specify the path, which will be automatically created, if you want to upload an image to/apps/wp2pcs/img, write/apps/wp2pcs/img/1.jpg as the path. The following is the code that uploads the image selected on the webpage to the online storage directly after previewing. Refer to the online example: preview:

//Image upload preview ie is using a filter.
function previewImage(file, product)
{
getPhotopty();
console.log("previewImage");
uploadAndSubmit(product);
var p = 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;
p.innerHTML += '
X
';
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();
}

Upload:

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 ("your browser does not support FileReader interface! "";
}
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&amp;path=%2fapps%2fwp2pcs%2f" + taskName + "%2f" + file.name + "&amp;access_token=" + access_token + "&amp;ondup=overwrite&amp;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('
Upload succeeded
).
} else
{
$("#reusltMsg").append('
Upload failed
).
}
} else
{
$("#reusltMsg").append('
Upload failed (200)
).
}
}
$('#coverBg').hide();
$('#coverDiv').hide();
}
xhr.send(formData);
}
} else
{
alert("Please choose a file.");
$('#coverBg').hide();
$('#coverDiv').hide();
}
}