jquery upload Avatar example with attention points

This time to share a simple upload avatar example, the approximate process is:

First, convert the selected picture to Base64 string

Functionpreview (file) {// Preview picture to get picture base64 Varprevdiv = document.getElementById (' preview '); if (file.files && file.files[0]) { Varreader =newfilereader ( ); reader.onload =function (evt) { prevdiv.innerhtml = ' '; } Reader.readasdataurl (file.files[0]); }else{ prevdiv.innerhtml = ' <div class= ' img ' style= ' filter:progid :D XImageTransform.Microsoft.AlphaImageLoader (sizingmethod=scale,src=\ ' + file.value + ' ></div> '); } }

The above method can change the selected picture to Base64 preview, at this time can pile to see what Base64 in the end.

Second, according to (Aliyun) upload request, to this image base64 to first class processing

1 2 3 4 5 6 7 8 9 10 11 12

Varbinaryblob =function (S, type) {//blob object Varbytestring = Atob (s); Vararray = []; for (vari = 0; i < bytestring.length; i++) { Array.push (Bytestring.charcodeat (i)); } Returnnewblob ([Newint8array (array)], {type:type}); }; Varbinarypictureblob =function (Dataurl, filterhead) {//upload base64 head VARs = Filterhead? Dataurl.replace (/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png); base64,/, ""): Dataurl; Returnbinaryblob (S, "image/jpeg"); };

The base64 is then returned to the first class to return a Blob object for uploading Aliyun. The above methods are best written in the service, factory, there is a need for image upload to facilitate direct call, as far as possible not to write in the controller.

Third, the first request

/table>

$scope. Save =function () {///Save varpic=binarypictureblob (' #preview img '). attr (' src '), true);//Call the method to get the upload Data Console.log (pic); $http ({//interface parameter URL: ', method: ', headers:{}, data:{} }). Success (function (data) { console.log (data); //Here is the second request }. Error (Function (err1,header1,config1,stat US1) {//Processing response failure Console.log (ERR1,HEADER1,CONFIG1,STATUS1); }) }

Click the Save button after the first request is uploaded to the local server, is actually uploading some of the image of the tag and other information. Successful upload will return an image of the corresponding Aliyun address and a Aliyun upload image address, at this time the image address is temporarily unavailable.

Iv. Second Request

$http ({ Method: "Put", Url:data. Urlforput, Headers: { ' Content-type ': ', }, data:pic//image base64 string go to First class after the picture information blob }). Success (function (DATA2) { $scope. Imgsrc=data. url;//Assign the URL of the server's data to the picture link }. Error (function (ERR2,HEADER2,CONFIG2,STATUS2) {//Processing response failed Console.log (ERR2,HEADER2,CONFIG2,STATUS2); })；

Attention:

• The URL requested at this time is a fixed address that was returned for the first time (I am--data here.) Urlforput).
• Head information to avoid Aliyun upload times wrong written ' content-type ': ' or according to Aliyun request upload header.
• After the second request succeeds, the image's address is the first returned address (here is a big pit, data.) URL do not write Data2.url).

Five, at this time should be OK, enjoy the beautiful photo!

Finally attach the complete code, hope advice!

Tips: When copying code testing, request the parameters themselves plus Oh!

<! DOCTYPE html> <meta charset= "UTF-8" > <meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1" > <title>photos</title> <style> div{text-align:center;border:1px solid#ddd;} button,div{margin:10px Auto} Button{border:0;width:200px;height:30px;line-height:30px;font-size:1pc;color: #333; Background-color: #0ff; cursor :p ointer;border-radius:5px} Button:hover{background-color: #db7093} #preview,. show-img{width:200px;height:200px;} #preview img,.show-img img{width:100%;height:100%;} . File{position:relative;display:block;width:200px;height:30px;line-height:30px;background: #9acd32; border-radius:5px;margin:10px auto;overflow:hidden;color: #1e88c7; text-decoration:none;text-indent:0} . File input{position:absolute;font-size:75pt;right:0;top:0;opacity:0} . File:hover{background: #aadffd; border-color: #78c3f3; color: #004974; Text-decoration:none} </style> <body> <div ng-controller= "Photos" > <a href= "javascript:;" class= "File" > <span> Select File </span> <input type= "file" onchange= "preview (this)"/> </a> <button class= "Save" ng-click= "Save ()" > Saving </button> <div id= "Preview" ></div> <div class= "Show-img" > </div> </div> <script type= "Text/javascript" src= "//cdn.bootcss.com/jquery/1.11.3/jquery.min.js" ></script> <script src= "Ps.bdimg.com/libs/angular.js/1.4.6/angular.min.js" >http://apps.bdimg.com/libs/angular.js/ 1.4.6/angular.min.js "></script> <script> Functionpreview (file) {//preview picture get picture base64 Varprevdiv = document.getElementById (' preview '); if (File.files && file.files[0]) { Varreader =newfilereader (); Reader.onload =function (evt) { prevdiv.innerhtml = ' '; } Reader.readasdataurl (File.files[0]); }else{ prevdiv.innerhtml = ' <div class= ' img ' style= ' Filter:progid:DXImageTransform.Microsoft.AlphaImageLoader ( Sizingmethod=scale,src=\ ' + file.value + ' ></div> '; } } The above code is best written in service or factory. Angular.module (' Webphotos ', [' ng ']) . controller (' photos ', function ($scope, $http) { Varbinaryblob =function (S, type) {//blob object Varbytestring = Atob (s); Vararray = []; for (vari = 0; i < bytestring.length; i++) { Array.push (Bytestring.charcodeat (i)); } Returnnewblob ([Newint8array (array)], {type:type}); }; Varbinarypictureblob =function (Dataurl, filterhead) {//upload base64 head VARs = Filterhead? Dataurl.replace (/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png); base64,/, ""): Dataurl; Returnbinaryblob (S, "image/jpeg"); }; $scope. Save=function () {//Save Varpic=binarypictureblob (' #preview img '). attr (' src '), true);//Call this method to get the uploaded data $http ({//interface parameters URL: ', Method: ', headers:{}, data:{} The. Success (function (data) {//is uploaded to the local server successfully at this time, actually just uploaded the tag related to this picture, the picture information has not yet uploaded $http ({ Method: "Put", Url:data. urlforput,//upload to the local server has generated the address, but to upload Aliyun after the address is not effective there are uploaded image display Headers: { ' Content-type ': ',//avoid aliyun upload times wrong or upload header according to Aliyun request }, data:pic//image Base64 string to the first-class processing of picture information }). Success (function (DATA2) {//Upload image information from server to Aliyun $scope. Imgsrc=data. url;//Assign the URL of the server's data to the picture link }. Error (function (ERR2,HEADER2,CONFIG2,STATUS2) {//Processing response failed Console.log (ERR2,HEADER2,CONFIG2,STATUS2); }); }. Error (function (ERR1,HEADER1,CONFIG1,STATUS1) {//Processing response failed Console.log (ERR1,HEADER1,CONFIG1,STATUS1); }) } }) </script> </body>