angularjs php上传文件 使用AngularJS和php服务器脚本上传文件

小编典典

您可以使用FormData对象将表单数据发送到服务器，这将允许您同时发送文件和文本数据。您可以在此处找到有关它的更多信息。

index.html

upload me

在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

$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 . "

" . $conn->error;

}

$conn->close();

?>

-07-04