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

Source: Internet
Author: User
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();
}
} 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.