Using the PCs API to upload download files to a free Baidu network _javascript tips

Baidu Personal Cloud disk space large, completely free, but also provides a PCs API to invoke the operation of files, in peacetime projects in the inside to save some files is very practical.

Environment Preparation:

Access to read and write network disk and access to 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, with a variety of language SDK, I use the Laravel5, Direct guide inside the PHP SDK is still not used, slightly modified to use.

Read the above two articles, basic can be used, the following posted directly to the user selected picture preview then upload to the network, upload API:
Https://pcs.baidu.com/rest/2.0/pcs/file?method=upload&path=%2fapps%2wp2pcs%2f1. jpg&access_token=*** Red part is fixed, because only allowed to upload to this directory, the actual corresponding to the network disk directory is my network disk/My application data/wp2pcs, no need to create a directory to upload files, only to specify the path, it will automatically create, If you want to upload the picture to/apps/wp2pcs/img, path will be written/apps/wp2pcs/img/1.jpg. The following is the user selected on the page of the picture, the preview directly uploaded to the network disk code, referring to the online example: preview:

/Picture upload preview IE is using a filter. 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 F Ilereader () 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" ></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 (); }

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 the 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&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 = =) {Console.log ("upload complete"); Console.log ("Response:" + Xhr.responsetex
T);
var result = $.parsejson (Xhr.responsetext); if (Result.hasownproperty ("path")) {$ ("#reusltMsg"). Append (' <div class= ' alert alert-success ' role= ' alert ' >
Upload successful .</div> '); else {$ (' #reusltMsg '). Append (' <div class= ' alert alert-danger ' role= ' alert ' > upload failed .</div> ');}
else {$ (' #reusltMsg '). Append (' <div class= "alert Alert-danger" role= "alert" > Upload failed) .</div> ');} $ (' #coverBg '). Hide ();
$ (' #coverDiv '). Hide ();
} xhr.send (FormData); } else {alert ("Please choose a file."); $ (' #coverBg '). Hide (); $ (' #coverDiv '). Hide ();}