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

Source: Internet
Author: User

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 ();}

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.