Bild hochladen und speichern im lokalen Speicher mit angularjs

Möchte ich einen button auf meine Seite, wo ich kann ein Bild hochladen vom lokalen system und dann will ich speichern, das Bild in meinem lokalen Speicher.

Ich bin daran interessiert zu erfahren, angularjs hier.

InformationsquelleAutor Aditya Sethi | 2013-08-31

  1. 8

    Würden Sie wollen, Kodieren Sie das Bild als base64-string und speichern im lokalen Speicher.

    Sehen diese Antwort für ein Beispiel, wie Sie konvertieren Sie das Bild in einer base-64-Zeichenfolge. toDataURL() gibt einen string zurück, was Sie können, und speichern Sie dann die gleiche Weise würden Sie normalerweise speichern einen string in ein JSON-Objekt.

    Um das Bild anzuzeigen, verwenden Sie so etwas wie dieses:

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

    wo blahblahblah ist der string, der zurückgegeben wird.

    Erstmal danke. Aber indem Sie es tun, wäre ich in der Lage, speichern Sie dieses Bild in ein json-Objekt? Im Grunde, wie lese ich den Inhalt des Bildes?
    Erweitert haben, auf meine Antwort, dass zur Deckung der
    Dank Matthew 🙂 bei mir hat Es geklappt
    Möglicherweise möchten Sie akzeptieren diese Antwort dann
    Bro kannst du mir bitte helfen wenn ich senden Sie diese json-string an server via http-request kann ich Dekodiere diesen string code wieder in jpg, png,etc Erweiterung zu ?? mir helfen

    InformationsquelleAutor Matthew Daly

  2. 1

    Folgen Sie den nachstehenden code für das laden und speichern-image mit AngularJS

    Erstellen index.php - Datei und initialisieren Sie die app und erstellen Sie AngularJS-controller.

    <!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>

    Erstellen Sie danach app.js und code schreiben, hochladen, Bild mit 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);
    };

}]);

    Erstellen Sie danach post.php Datei hochladen Datei in den Speicher.

    <?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';
            }
        }
    } 
} ?>

    Erstellen Bilder Ordner.
    Hoffe, das wird Ihnen helfen. Referenz: http://jsfiddle.net/JeJenny/ZG9re/

    InformationsquelleAutor Bhushan Gohel

Schreibe einen Kommentar