使用 AngularJS 和 php 服务器脚本上传文件 [英] File Upload Using AngularJS with php server script
问题描述
我已经查看了有关此主题的问题和答案，但我认为它们没有完全回答我的问题:
使用角度前端的上传(无论以哪种方式处理)将文件数据发送到服务器上的脚本，例如 php 脚本(这是我的首选方法).一旦 php 脚本运行，我想返回到上传的页面并在那里给出一条消息..我不想显示 php 页面.将欣赏有关如何实现这一目标的一些指导.理想情况下，将什么代码添加到 php 脚本中.
我想捕获与文件相关的信息并将其保存到数据库中，例如其名称和用户输入/选择的数据，例如文档类别.有没有办法将其作为文件上传的一部分来实现?即，理想情况下，用户将在包含文件上传按钮的表单中完成条目，以便用户选择要上传的文件，但只有在单击提交的表单时，文件上传才会与其他表单数据一起返回进行处理.
我在这方面花了 3 天时间..所以任何帮助都会很棒.
您可以使用 FormData 对象将表单数据发送到您的服务器.它允许您同时发送文件和文本数据.您可以在此处找到有关它的更多信息.
index.html
<div class="文件上传"><input type="text" ng-model="name"><input type="file" file-model="myFile"/><button ng-click="uploadFile()">上传我</button>
在 app.js 中，我们创建了一个自定义指令 fileModel，我们在其中监听 input 元素内容的变化，并相应地更改范围内变量的值.这是通过使用 $parse 服务在我们的范围内设置值来实现的.
app.js
var myApp = angular.module('myApp', []);myApp.directive('fileModel', ['$parse', function ($parse) {返回 {限制:'A'，链接:函数(范围，元素，属性){var 模型 = $parse(attrs.fileModel);var modelSetter = model.assign;element.bind('change', function(){范围.$应用(函数(){模型设置器(范围，元素[0].文件[0])；});});}};}]);//我们可以编写自己的fileUpload 服务，以便在控制器中重用它myApp.service('fileUpload', ['$http', function ($http) {this.uploadFileToUrl = 函数(文件，uploadUrl，名称){var fd = new FormData();fd.append('文件', 文件);fd.append('name', name);$http.post(uploadUrl, fd, {变换请求:angular.identity，标头:{'Content-Type':未定义，'Process-Data':false}}).成功(功能(){console.log("成功");}).错误(功能(){console.log("成功");});}}]);myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){$scope.uploadFile = function(){var 文件 = $scope.myFile;console.log('文件是');控制台目录(文件)；var uploadUrl = "save_form.php";var text = $scope.name;fileUpload.uploadFileToUrl(文件，uploadUrl，文本)；};}]);save_form.php
connect_error){die("连接失败:" . $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"]);//新文件上传} 别的 {回声错误:".$sql .
".$conn->错误；}$conn->close();?>I have reviewed the questions and answers on this topic and I dont think they fully answer my issues which are:
the upload using the angular frontend (whichever way this is handled) sends the file data to a script on the server such as a php script (which is my preferred method). Once the php script has run I want to return to the page from which the upload was made and give a message there..I dont want the php page to display. Will appreciate some guidance on how to achieve this. Ideally what code to add to the php script.
I want to capture and save to a database info relating to the file such as its name and data entered/selected by the user such as a document category. Is there a way to achieve this as part of the file upload? ie ideally the user will complete entries in a form which includes a file upload button so that the user selects the file to upload but only on the form submit being clicked is the file upload actioned along with the other form data being returned for processing.
I have spent 3 days on this.. so any help will be great.
You can use FormData objects to send form data to your server.It will allow you to send both files and text data at the same time. You can find more information about 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>
In app.js, we create a custom directive fileModel, in which we listen for changes to the content of the input element and change the value of the variable in the scope accordingly. This is achieved using the $parse service to set the value in our scope.
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();
?>
这篇关于使用 AngularJS 和 php 服务器脚本上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
