Angular js Datei Upload auf PHP-Server

Question

Ich entwickle eine E-Commerce-Website, wo ein eingeloggter Administrator ein neues Produkt hinzufügen muss. Das Produktformular enthält eine Produktbeschreibung und ein Produktbild zum Hochladen. Was ich will ist, alle Formulardaten in einem Winkel-Controller abzufangen und sie an einen Dienst zu übergeben, um ihn zu verarbeiten. Bis jetzt habe ich versagt. Hier

ist der HTML-Markup:

<label for="product_name">Product name</label> 
<input id="product_name" type="text" ng-model="addprovm.product.name"> 
<input id="product_img" type="file" ng-model="file" name="file"> 

Die Form ist Wrapper in einer Winkelfunktion. ng-submit = "addprovm.CreateProduct()"

Im mein Controller Ich habe folgende -

function addproductCtrl($http){ 
    var  addprovm  = this;    

    // product details. 
    addprovm.product = { 
     name: "", 
     price: "", 
     category: "", 
     product_img: "" 
    }; 


    // submit button function. 
    addprovm.CreateProduct = function(){   
     console.log(addprovm.product); 
    } 
} 

Hier habe ich die Formulardaten an console.log wollte und validieren (falls erforderlich), bevor ich sie schicken zu einem Dienst, der dann diese Daten nimmt und sie an ein php-Skript weitergibt, um zu verarbeiten. Ich möchte, dass mein php-Skript die Bildakte an einen Standort hochlädt, und Produktinfo in eine mysql DB einfügt. Kann mir bitte jemand helfen? Danke im Voraus. Prost.

Answer 1

Dies ist eine einfache Upload-Datei, vielleicht kann Ihnen helfen, ein Objekt mit dem Status der Datei zurückgeben. Sie können eine Funktion hinzufügen, um diese Datei vor der INSERT-Abfrage aufzurufen.

<?php include_once("../conection.php");?> 
<?php 
    if(isset($_FILES['file'])){ 
     $errors = array();   
     $file_name = $_FILES['file']['name']; 
     $file_size = $_FILES['file']['size']; 
     $file_tmp = $_FILES['file']['tmp_name']; 
     $file_type = $_FILES['file']['type']; 
     $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION)); 
     $extensions = array("jpg","jpeg","png"); 

     if(in_array($file_ext, $extensions) === false){ 
      $errors[]="Is not a valid File."; 
     } 

     $path = dirname(__FILE__) . '/products/'; 

     if(file_exists($path.'/'.$file_name)) { 
      $errors[] = "This file has already been uploaded."; 
     } 

     if (!file_exists($path)) { 
      mkdir($path, 0777, true); 
     } 

     if(empty($errors) == true){ 
      move_uploaded_file($file_tmp, $path.'/'.$file_name); 
      echo (json_encode(['file' => $file_name])); 
     }else{ 
      echo(json_encode(['errores' => $errors])); 
     } 
    } 
?> 

Answer 2

können Sie versuchen, ng-file-upload;) und ist leicht

$scope.upload = function (file) { 
     Upload.upload({ 
      url: 'upload/url', 
      data: {file: file, 'username': $scope.username} 
     }).then(function (resp) { 
      console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data); 
     }, function (resp) { 
      console.log('Error status: ' + resp.status); 
     }, function (evt) { 
      var progressPercentage = parseInt(100.0 * evt.loaded/evt.total); 
      console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name); 
     }); 
    };