使用AngularJS和php服务器脚本上传文件 [英] File Upload Using AngularJS with php server script
问题描述
我已经审查了有关该主题的问题和答案，但我认为他们不能完全回答我的问题:
I have reviewed the questions and answers on this topic and I dont think they fully answer my issues which are:
-
使用有角前端(无论采用哪种方式处理)的上载会将文件数据发送到服务器上的脚本(例如php脚本)(这是我的首选方法).一旦运行了php脚本，我想返回上载的页面并在其中提供消息.我不希望显示php页面.将赞赏一些有关如何实现这一目标的指导.理想情况是将什么代码添加到php脚本中.
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.
我想捕获与文件有关的信息并将其保存到数据库中，例如文件名和用户输入/选择的数据(例如文档类别).有没有办法在上传文件的过程中实现这一目标?即，理想情况下，用户将以包含文件上传按钮的表单完成输入，以便用户选择要上传的文件，但只有在单击表单提交时，文件上传才会与其他表单数据一起返回以进行处理. /p>
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.
我已经花了3天时间..所以任何帮助都会很棒.
I have spent 3 days on this.. so any help will be great.
推荐答案
您可以使用FormData对象将表单数据发送到服务器.它将允许您同时发送文件和文本数据.您可以在此处找到更多信息.
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>
在app.js中，我们创建了一个自定义指令fileModel，其中我们侦听对输入元素内容的更改，并相应地更改范围中变量的值.这是通过使用$ parse服务在我们的范围内设置值来实现的.
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屋！
