文件上傳使用的PHP服務器腳本AngularJS

我審閱了關於這個主題的問題和答案，我不認爲他們完全回答我的問題，它們是：文件上傳使用的PHP服務器腳本AngularJS

使用角前端（無論怎樣這上傳被處理）將文件數據發送到服務器上的腳本，如php腳本（這是我的首選方法）。一旦php腳本已經運行，我想返回上傳的頁面，並在那裏給出一條消息..我不想顯示php頁面。將欣賞一些關於如何實現這一目標的指導。理想的是什麼代碼添加到PHP腳本。
我想捕獲並保存到與文件相關的數據庫信息，例如其名稱和用戶輸入/選擇的數據，如文檔類別。有沒有辦法做到這一點，作爲文件上傳的一部分？即，理想地，用戶將以包括文件上載按鈕的表格完成條目，以便用戶選擇要上傳的文件，但僅在表單提交被點擊的情況下是文件上傳被執行以及被返回用於處理的其他表單數據。

我已經花了3天在這..所以任何幫助將是偉大的。

2015-11-05 Richard Stanton-Reid

您是否嘗試過類似NG-流？它包括示例角度和php代碼。 – Tristan

非常感謝。它看起來不錯，但（a）我無法讓它工作（通過運動沒有明顯的錯誤，但文件實際上沒有上傳..使用他們的基本示例..傳輸列表顯示文件傳輸完成爲真（但文件實際上沒有上傳）和上傳爲假）和（b）我需要弄清楚如何同時提交其他數據字段或作爲清晰工作流的一部分，例如上傳文件後，文件名將由文件輸入上傳到表單字段，用戶離開後輸入其他表單字段，然後發佈到REST進行數據庫輸入。 –

Midhun提供的答案很全面，是一個不錯的選擇。如果你想使用ng-flow，我可以給你提供關於如何在帖子中包含表單數據的細節？ – Tristan

您可以使用FormData對象將表單數據發送到您的server.It將允許您同時發送文件和文本數據。你可以找到更多關於它的信息here。

的index.html

<body ng-controller="myCtrl"> 
    <div class="file-upload"> 
     <input type="text" ng-model="name"> 
     <input type="file" file-model="myFile"/> 
     <button ng-click="uploadFile()">upload me</button> 
    </div> 
</body>

在app.js，我們創建一個自定義指令fileModel，在我們聽更改輸入元素的內容和改變變量的值相應的範圍。這是通過使用$ parse服務在我們的作用域中設置值來實現的。

app.js

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]); 
      }); 
     }); 
    } 
    }; 
}]); 

// We can write our own fileUpload service to reuse it in the controller 
myApp.service('fileUpload', ['$http', function ($http) { 
    this.uploadFileToUrl = function(file, uploadUrl, name){ 
     var fd = new FormData(); 
     fd.append('file', file); 
     fd.append('name', name); 
     $http.post(uploadUrl, fd, { 
      transformRequest: angular.identity, 
      headers: {'Content-Type': undefined,'Process-Data': false} 
     }) 
     .success(function(){ 
      console.log("Success"); 
     }) 
     .error(function(){ 
      console.log("Success"); 
     }); 
    } 
}]); 

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

    $scope.uploadFile = function(){ 
     var file = $scope.myFile; 
     console.log('file is '); 
     console.dir(file); 

     var uploadUrl = "save_form.php"; 
     var text = $scope.name; 
     fileUpload.uploadFileToUrl(file, uploadUrl, text); 
    }; 

}]);

save_form.php

<?php 

    $target_dir = "./upload/"; 
    $name = $_POST['name']; 
    print_r($_FILES); 
    $target_file = $target_dir . basename($_FILES["file"]["name"]); 

    move_uploaded_file($_FILES["file"]["tmp_name"], $target_file); 

    //write code for saving to database 
    include_once "config.php"; 

    // Create connection 
    $conn = new mysqli($servername, $username, $password, $dbname); 
    // Check connection 
    if ($conn->connect_error) { 
     die("Connection failed: " . $conn->connect_error); 
    } 

    $sql = "INSERT INTO MyData (name,filename) VALUES ('".$name."','".basename($_FILES["file"]["name"])."')"; 

    if ($conn->query($sql) === TRUE) { 
     echo json_encode($_FILES["file"]); // new file uploaded 
    } else { 
     echo "Error: " . $sql . "<br>" . $conn->error; 
    } 

    $conn->close(); 

?>

來源

2015-11-05 08:13:38

非常感謝Midhum。明天會經歷這個。今天在醫院！ –

但是，我使用ng-file-upload，並且我嘗試了Midhum和github頁面中的示例，我得到以下錯誤：在偏移量623處找不到有效的標記，找到：250 這似乎發生在Upload函數被稱爲..我有一個控制檯。立即登錄上傳功能，不叫任何想法？ –

我編輯了答案。這種方法更好，不需要外部庫。請嘗試一下。 –

文件上傳使用的PHP服務器腳本AngularJS

回答

相關問題