使用 AngularJS 和 php 服务器脚本上传文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33534497/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
File Upload Using AngularJS with php server script
提问by Richard Stanton-Reid
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.
使用角度前端的上传（无论以哪种方式处理）将文件数据发送到服务器上的脚本，例如 php 脚本（这是我的首选方法）。一旦 php 脚本运行，我想返回到上传的页面并在那里给出一条消息..我不想显示 php 页面。将欣赏有关如何实现这一目标的一些指导。理想情况下，将什么代码添加到 php 脚本中。
我想捕获与文件相关的信息并将其保存到数据库中，例如其名称和用户输入/选择的数据，例如文档类别。有没有办法将其作为文件上传的一部分来实现？即，理想情况下，用户将在包含文件上传按钮的表单中完成条目，以便用户选择要上传的文件，但只有在单击表单提交时，文件上传才会与其他表单数据一起返回进行处理。
I have spent 3 days on this.. so any help will be great.
我在这上面花了 3 天的时间。所以任何帮助都会很棒。
回答by Midhun Darvin
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.
您可以使用 FormData 对象将表单数据发送到您的服务器。它允许您同时发送文件和文本数据。您可以在此处找到有关它的更多信息。
index.html
索引.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 中，我们创建了一个自定义指令fileModel，在该指令中我们监听输入元素内容的变化，并相应地更改作用域中变量的值。这是使用 $parse 服务在我们的范围内设置值来实现的。
app.js
应用程序.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
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();
?>
