Angularjs - 使用 php 上传文件 [英] Angularjs - File upload with php
问题描述
我花了几天时间寻找一个相当简单的 angularjs 文件上传方法集成，其中包括一个基本的 php 服务器端脚本..
我需要一个简单的表单字段和文件上传上传.
我发现的所有示例要么严重依赖 jQuery，要么如果它们看起来像我可以使用的示例"，则它们完全不清楚和混乱.
这两个示例(如果我能弄清楚如何与 PHP 结合)将解决我的难题..
本页示例 5http://ng-upload.eu01.aws.af.cm/ >
此页面上的示例是我非常喜欢的示例.http://angular-file-upload.appspot.com/
有人可以为我带来更多的启发..我真的很想看到一个输入文件和一个文件上传，如果这样的东西存在于某处，那么使用尽可能简单的 angular 和 php 代码.
我很乐意实施这个http://twilson63.github.io/ngUpload/或 http://angular-file-upload.appspot.com/
如果这是我的 PHP
$fname = $_POST["fname"];if(isset($_FILES['image'])){$错误=数组()；$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[]="不允许使用图像扩展名，请选择 JPEG 或 PNG 文件.";}如果($file_size > 2097152){$errors[]='文件大小不能超过 2 MB';}如果(空($错误)==真){move_uploaded_file($file_tmp,"图片/".$file_name);回声 $fname .上传的文件:".图片/" .$文件名；}别的{打印_r($错误)；}}?>这是我的基本 html
我怎么能(干净地)解决这个问题?我的控制器和调整后的 html 应该是什么样的?
如果你使用 ng-file- 上传您可以在客户端进行大部分预验证，例如使用 ngf-max-size 或 ngf-pattern 指令检查文件大小或类型.
Upload.upload() 将向服务器发送 POST multipart/form-data 请求，因此 $_FILES['file'] 应包含上传的文件.
HTML
<input type="text" name="username" ng-model="username"/><input type="file" ngf-select="onFileSelect($file)" ngf-pattern="'image/*'" ngf-max-size="2M">JS:
//注入角度文件上传指令和服务.angular.module('myApp', ['ngFileUpload']);var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {$scope.onFileSelect = 函数(文件){如果(！文件)返回；上传.上传({url: '/upload.php',数据:{文件:文件，用户名:$scope.username}}).那么(功能(响应){//文件上传成功控制台日志(响应数据)；});};}];上传.php
$fname = $_POST["fname"];if(isset($_FILES['image'])){//错误验证可以在javascript客户端完成.$错误=数组()；$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[]="不允许使用图像扩展名，请选择 JPEG 或 PNG 文件.";}如果($file_size > 2097152){$errors[]='文件大小不能超过 2 MB';}如果(空($错误)==真){move_uploaded_file($file_tmp,"图片/".$file_name);回声 $fname .上传的文件:".图片/" .$文件名；}别的{打印_r($错误)；}}?>I have spent days looking for a fairly simple integration of angularjs file upload method that includes a basic php server side script..
I need a simple form one field and file upload upload.
All examples I find are either heavily relying of jQuery or if they seem like something I could use their "examples" are completely unclear and messy.
These two examples (if I could figure out how to incorporate with PHP) would solve my puzzle..
Example 5 on this page http://ng-upload.eu01.aws.af.cm/
And the example on this page is one I really like a lot.. http://angular-file-upload.appspot.com/
Could someone bring more light into this for me.. I would really like to see a one input filed and one file upload with as simple as possible angular and php code if such thing exists somewhere.
I would be happy to implement this http://twilson63.github.io/ngUpload/ or http://angular-file-upload.appspot.com/
If this is my 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);
}
}
?>
and this my basic html
<form action="" method="POST" enctype="multipart/form-data">
<input type="text" name="fname" />
<input type="file" name="image" />
<input type="submit"/>
</form>
How could I approach this (cleanly)? What should my controller and adjusted html look like?
If you use ng-file-upload You can do most of those pre-validation on the client side like checking the file size or type with ngf-max-size or ngf-pattern directives.
Upload.upload() will send a POST multipart/form-data request to the server so $_FILES['file'] should contain the uploaded file.
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>
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);
}
}
?>
这篇关于Angularjs - 使用 php 上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
