Możesz użyć obiektów FormData do wysłania danych formularza na serwer. Pozwoli to na wysyłanie zarówno plików, jak i danych tekstowych w tym samym czasie. Możesz znaleźć więcej informacji na ten temat 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>
W app.js tworzymy niestandardową fileModel dyrektywę, w której możemy słuchać do zmian w zawartości elementu wejściowego i zmienić wartość zmiennej w odpowiednio zakres. Osiąga się to za pomocą usługi $ parsowanie, aby ustawić wartość w naszym zakresie.
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();
?>
Czy próbowałeś coś podobnego ng-flow? Zawiera przykładowy kod kątowy i php. – Tristan
dzięki za to. Wygląda świetnie, ale (a) nie mogę go uruchomić (wykonuje ruchy bez widocznych błędów, ale plik nie jest w rzeczywistości przesłany), co jest ich podstawowym przykładem. Lista transferów pokazuje transfer pliku zakończony jako prawdziwy (ale plik faktycznie nie przesłana) i przesyłanie jako fałszywe) i (b) muszę opracować sposób przesyłania innych pól danych w tym samym czasie lub jako część przejrzystego przepływu pracy, np. po przesłaniu pliku, nazwa pliku powinna zostać wprowadzona przez plik prześlij do pola formularza, pozostawiając użytkownika, aby wprowadzić inne pola formularza, a następnie opublikuj wpis REST dotyczący bazy danych. –
Odpowiedź udzielona przez Midhun jest kompleksowa i jest dobrym rozwiązaniem. Jeśli chcesz przejść z ng-flow, mogę podać szczegółowe informacje na temat umieszczania danych formularzy w poście? – Tristan