Я рассмотрел вопросы и ответы по этой теме, и я не думаю, что они полностью отвечают на мои вопросы, которые:
загрузка с использованием углового интерфейса (в зависимости от того, как это обрабатывается) отправляет данные файла скрипту на сервере, например, скрипту php (который является моим предпочтительным методом). После запуска PHP-скрипта я хочу вернуться на страницу, с которой была сделана загрузка, и дать там сообщение. Я не хочу, чтобы страница php отображалась. По достоинству оценят некоторые рекомендации о том, как достичь этого. В идеале, какой код добавить к скрипту php.
Я хочу захватить и сохранить информацию о базе данных, относящуюся к файлу, такую как имя и данные, введенные / выбранные пользователем, такие как категория документа. Есть ли способ достичь этого как часть загрузки файла? т.е. в идеале пользователь будет заполнять записи в форме, которая включает в себя кнопку загрузки файла, чтобы пользователь выбирал файл для загрузки, но только на клике формы, которую вы нажали, – это загрузка файла, выполняемая вместе с другими данными формы, возвращаемыми для обработки.
Я потратил 3 дня на это .. так что любая помощь будет большой.
Вы можете использовать объекты FormData для отправки данных формы на ваш сервер. Это позволит вам одновременно отправлять файлы и текстовые данные. Вы можете найти дополнительную информацию об этом здесь .
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(); ?>