Angularjs - 文件上传用PHP [英] Angularjs - File upload with php
问题描述
我花了几天找一个相当简单的集成,它包括一个基本的PHP服务器端脚本angularjs文件上传的方法。
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.
所有的例子,我觉得要么严重依赖jQuery的,或者如果他们似乎喜欢的东西,我可以用自己的榜样是完全不清楚,杂乱。
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.
这两个例子(如果我能想出如何与PHP集成)将解决我的难题。
These two examples (if I could figure out how to incorporate with PHP) would solve my puzzle..
此页面上例5
http://ng-upload.eu01.aws.af.cm/
和此页面上的例子是我真的想了很多..
http://angular-file-upload.appspot.com/
And the example on this page is one I really like a lot.. http://angular-file-upload.appspot.com/
有人能带来更多的光线进入这对我来说..我真的想看到一个一个输入归档和尽可能简单的角度和php code一个文件上传,如果这样的事情存在某处。
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.
我将很高兴来实现这个 http://twilson63.github.io/ngUpload/ 或 http://angular-file-upload.appspot.com/
I would be happy to implement this http://twilson63.github.io/ngUpload/ or 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
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>
我怎么能解决这个(干净)?应我的控制器和调整后的HTML是什么样的?
How could I approach this (cleanly)? What should my controller and adjusted html look like?
推荐答案
如果您使用角文件-upload
你可以做最那些pre-验证像检查文件大小或类型与NGF-MAX尺寸或NGF图案指示的客户端。
If you use angular-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()
将发送POST的multipart / form-data的请求到服务器,以便 $ _ FILES ['文件']
应包含上传的文件。
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的
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屋!