我花了几天时间寻找一个相当简单的angularjs文件上传方法集成,其中包括一个基本的php服务器端脚本。。
我需要一个简单的表单一个字段和文件上传上传。
我发现的所有例子要么严重依赖jQuery,要么如果它们看起来像我可以使用的东西,那么它们的"例子"是完全不清楚和混乱的。
这两个例子(如果我能弄清楚如何与PHP结合)将解决我的难题。。
本页示例5http://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应该是什么样子?
如果使用ng文件上传您可以在客户端进行大多数预验证,例如使用ngf-max-size或ngf-pattern指令检查文件大小或类型。
Upload.upload()
将向服务器发送POST多部分/表单数据请求,因此$_FILES['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);
});
};
}];
上传.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);
}
}
?>
我也在与未定义的$files作斗争——我猜你是从php编写html代码的,还没有逃脱$in$文件。这是我的问题-应该是''$文件。
Dan