Baidu Personal Cloud disk space is big, completely free, and provides the PCs API for call operation files, in the usual project to save some files inside is very practical.
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 document: Http://developer.baidu.com/wiki/index.php?title=docs/pcs/overview, which has a variety of language SDK, I use the Laravel5, The PHP SDK in the direct guide can not be used, slightly modified to use.
After reading the above two articles, basic can be used, the following post-write directly to the user selected picture preview and then upload to the network disk, upload the API:
Https://pcs.baidu.com/rest/2.0/pcs/file?method=upload&path=%2fapps%2wp2pcs%2f1.jpg&access_ token=***
The red part is fixed, because only allowed to upload to this directory, the actual corresponding to the network disk directory is my network/My application Data/wp2pcs, no need to create a directory before uploading files, just specify the path, it will be automatically created, as you want to upload the picture to/apps/wp2pcs/img, The path will be written/apps/wp2pcs/img/1.jpg.
Here is the user on the page selection of images, preview directly uploaded to the network disk code, referring to the online example:
Preview:
//image upload Preview ie is using a filter. functionpreviewimage (file, product) {getphotopty (); Console.log ("Previewimage"); Uploadandsubmit (product); vardiv = document.getElementById (' preview ' +product); varFileName =File.value; //upload (); if(file.files) {vari = 0; varFunappendimage =function () { var_file =File.files[i]; if(_file) {varReader =NewFileReader () 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> '; varimg = document.getElementById (' imghead ' + product +fileName); IMG.SRC=Evt.target.result; I++; Funappendimage (); } reader.readasdataurl (_file); } }; Funappendimage (); } $(' #coverBg '). Show (); $(' #coverDiv '). Show (); //$ ("#uploadFrm" + product). Submit ();}
Upload:
varAccess_token = "***********";varBASEURL = "https://c.pcs.baidu.com/rest/2.0/pcs/";functionUploadandsubmit (product) {Console.log ("Start Uploadandsubmit"); if(typeofFileReader = = ' undefined ') {alert ("Your browser does not support the FileReader interface!" "); } varTaskName = $ ("#txtTask"). Val () + "-" + $ ("#txtTask2"). Val (); varform = document.forms["Uploadfrm" +Product]; Console.log ("Form:" +form); varFilectrl = "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(vari = 0; I < $ ("#filectrl" + product) [0].files.length; i++) { varFile =Form[filectrl].files[i]; Console.log (File.name); varFilePath = "%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"); varXHR =NewXMLHttpRequest (); Console.log (Access_token); varurl = 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); varFormData =NewFormData (); 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); varresult =$.parsejson (Xhr.responsetext); if(Result.hasownproperty ("Path")) { $("#reusltMsg"). Append (' <div class= ' alert alert-success ' role= ' alert ' > Upload Success .</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 (); }}
Use the PCs API to upload downloaded files to the free Baidu Web disk