Angularjs – 使用php上传文件

我花了几天时间寻找一个相当简单的angularjs文件上传方法的集成,其中包括一个基本的php服务器端脚本..

我需要一个简单的表单一个字段和文件上传上传。

我发现的所有例子都是严重依赖jQuery,或者如果它们看起来像我可以使用他们的“例子”那么完全不清楚和混乱。

这两个例子(如果我能弄清楚如何与PHP合并)将解决我的难题..

本页的示例5 http://ng-upload.eu01.aws.af.cm/

此页面上的示例是我非常喜欢的一个.. http://angular-file-upload.appspot.com/

有人可以为我带来更多的光。我真的希望看到一个输入文件和一个文件上传尽可能简单的角度和PHP代码,如果这样的事情存在于某处。

我很乐意实现这个http://twilson63.github.io/ngUpload/或http://angular-file-upload.appspot.com/

如果这是我的PHP

$fname = $_POST["fname"]; if(isset($_FILES['image'])){ $errors= array(); $file_name = $_FILES['image']['name']; $file_size =$_FILES['image']['size']; $file_tmp =$_FILES['image']['tmp_name']; $file_type=$_FILES['image']['type']; $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION)); $extensions = array("jpeg","jpg","png"); if(in_array($file_ext,$extensions )=== false){ $errors[]="image extension not allowed, please choose a JPEG or PNG file."; } if($file_size > 2097152){ $errors[]='File size cannot exceed 2 MB'; } if(empty($errors)==true){ move_uploaded_file($file_tmp,"images/".$file_name); echo $fname . " uploaded file: " . "images/" . $file_name; }else{ print_r($errors); } } ?> 

这是我的基本HTML

 

我怎么能这样(干净利落)? 我的控制器和调整后的html应该是什么样的?

如果使用ng-file-upload您可以在客户端进行大多数预validation,例如使用ngf-max-size或ngf-pattern指令检查文件大小或类型。

Upload.upload()会向服务器发送POST multipart / form-data请求,因此$_FILES['file']应该包含上传的文件。

HTML

 

JS:

 //inject angular file upload directives and service. angular.module('myApp', ['ngFileUpload']); var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) { $scope.onFileSelect = function(file) { if (!file) return; Upload.upload({ url: '/upload.php', data: {file: file, username: $scope.username} }).then(function(resp) { // file is uploaded successfully console.log(resp.data); }); }; }]; 

upload.php的

 $fname = $_POST["fname"]; if(isset($_FILES['image'])){ //The error validation could be done on the javascript client side. $errors= array(); $file_name = $_FILES['image']['name']; $file_size =$_FILES['image']['size']; $file_tmp =$_FILES['image']['tmp_name']; $file_type=$_FILES['image']['type']; $file_ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION)); $extensions = array("jpeg","jpg","png"); if(in_array($file_ext,$extensions )=== false){ $errors[]="image extension not allowed, please choose a JPEG or PNG file."; } if($file_size > 2097152){ $errors[]='File size cannot exceed 2 MB'; } if(empty($errors)==true){ move_uploaded_file($file_tmp,"images/".$file_name); echo $fname . " uploaded file: " . "images/" . $file_name; }else{ print_r($errors); } } ?> 

我还在与未定义的$文件作斗争 – 我会猜测你是从php编写html代码并且没有转义$ in $ files。 无论如何,那是我的问题 – 应该是\ $ files。