2013-08-31 29 views

risposta

8

Si desidera codificare l'immagine come stringa 64 di base e memorizzarla nella memoria locale.

Vedere this answer per un esempio di come convertire l'immagine in una stringa 64 di base. toDataURL() restituisce una stringa, che è quindi possibile memorizzare nello stesso modo in cui normalmente si memorizzerebbe una stringa in un oggetto JSON.

Per visualizzare l'immagine, si utilizza qualcosa di simile:

<img src="data:image/jpeg;base64,blahblahblah"></img> 

dove blahblahblah è la stringa restituita.

+0

Prima di tutto grazie. Ma facendolo sarei in grado di memorizzare questa immagine in un oggetto JSON? In pratica come leggo il contenuto dell'immagine? –

+0

@AdityaSethi Ho esteso la mia risposta per coprire che –

+0

Grazie Matthew :) Ha funzionato per me –

1

Segui sottostante Codice per l'upload e salvare l'immagine utilizzando AngularJS

Crea index.php di file e inizializzare app e creare regolatore AngularJS.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular-route.min.js"></script> 
     <script src="app.js"></script> 
    </head> 
    <body ng-app="myApp" ng-controller="myCtrl"> 
     <div> 
      <input type="file" file-model="myFile"/> 
      <button ng-click="uploadFile()">upload me</button> 
     </div> 
    </body> 
</html> 

Dopo questo, Crea app.js e scrivere il codice per caricare immagine utilizzando AngularJS.

var myApp = angular.module('myApp', []); 

myApp.directive('fileModel', ['$parse', function ($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
       scope.$apply(function(){ 
        modelSetter(scope, element[0].files[0]); 
       }); 
      }); 
     } 
    }; 
}]); 

myApp.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined} 
     }) 
     .success(function(){ 
     }) 
     .error(function(){ 
     }); 
    } 
}]); 

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 

    $scope.uploadFile = function(){ 
     var file = $scope.myFile; 
     console.log('file is ' + JSON.stringify(file)); 
     var uploadUrl = "post.php"; 
     fileUpload.uploadFileToUrl(file, uploadUrl); 
    }; 

}]); 

Dopo questo, Crea post.php file da caricare file in archiviazione.

<?php $upload_dir = "images/"; 
if(isset($_FILES["file"]["type"])) 
{ 
    $validextensions = array("jpeg", "jpg", "png", "gif"); 
    $temporary = explode(".", $_FILES["file"]["name"]); 
    $file_extension = end($temporary); 
    if ((($_FILES["file"]["type"] == "image/png") || ($_FILES["file"]["type"] == "image/jpg") || ($_FILES["file"]["type"] == "image/gif") || ($_FILES["file"]["type"] == "image/jpeg")) && in_array($file_extension, $validextensions)) { 
     if ($_FILES["file"]["error"] > 0){ 
      echo "Return Code: " . $_FILES["file"]["error"] . "<br/><br/>"; 
     } else { 
      if (file_exists($upload_dir.$_FILES["file"]["name"])) {     
       echo 'File already exist'; 
      } else { 
       $sourcePath = $_FILES['file']['tmp_name']; // Storing source path of the file in a variable 
       $filename = rand().$_FILES['file']['name']; 
       $targetPath = $upload_dir.$filename; // Target path where file is to be stored 
       move_uploaded_file($sourcePath,$targetPath) ; // Moving Uploaded file 
       echo 'success'; 
      } 
     } 
    } 
} ?> 

Creare immagini cartella. Spero che questo ti possa aiutare. Per riferimento: http://jsfiddle.net/JeJenny/ZG9re/

Problemi correlati