Angularjs – Загрузка файла с помощью php

Я потратил несколько дней на поиск довольно простой интеграции метода загрузки файлов angularjs, который включает в себя основной скрипт на сервере php.

Мне нужна простая форма для одного поля и загрузки файлов.

• Symfony2, Twig JSON шаблоны vs json_encode: что подходит для этой ситуации
• Заполнение полей в модальной форме с помощью PHP, jQuery
• Отправка электронной почты с статической страницы html
• получить параметры на php-странице, которая вызывается функцией ajax
• Вызов функции php в отдельном файле с использованием AJAX

Все примеры, которые я нахожу, либо сильно зависят от 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

 <form action="" method="POST" enctype="multipart/form-data"> <input type="text" name="fname" /> <input type="file" name="image" /> <input type="submit"/> </form> 

Как я могу подойти к этому (чисто)? Как должен выглядеть мой контроллер и настроенный html?

 <div ng-controller="MyCtrl"> <input type="text" name="username" ng-model="username"/> <input type="file" ngf-select="onFileSelect($file)" ngf-pattern="'image/*'" ngf-max-size="2M"> </div> 

 //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); }); }; }]; 

 $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); } } ?>