关键词:
【中文标题】Angularjs - 使用 php 上传文件【英文标题】:Angularjs - File upload with php 【发布时间】:2013-12-27 12:59:49 【问题描述】:我花了几天时间寻找一个相当简单的 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
<form action="" method="POST" enctype="multipart/form-data">
<input type="text" name="fname" />
<input type="file" name="image" />
<input type="submit"/>
</form>
我怎样才能(干净地)处理这个问题?我的控制器和调整后的 html 应该是什么样子?
【问题讨论】:
【参考方案1】:如果你使用ng-file-upload 您可以在客户端进行大部分预验证,例如使用 ngf-max-size 或 ngf-pattern 指令检查文件大小或类型。
Upload.upload()
将向服务器发送一个 POST multipart/form-data 请求,因此$_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);
?>
【讨论】:
您好,感谢您抽出宝贵时间。你能告诉我 $upload 是从哪里来的吗?而且我在尝试 angular-file-upload 时总是得到 $files undefined .. 你可能知道为什么吗? $upload 是包含 angular-file-upload.js 时将提供的 Angular 服务,如果仍有问题,请按照 GitHub 页面上的说明打开问题。很多人都在用这种方式。 亲爱的@danial 你如何在客户端为 $_FILE 设置“图像”名称? 我正在使用您上面的示例,但文件为空,脚本的执行将停止 url:'/upload.php'后缺少逗号【参考方案2】:我也在与未定义的 $files 作斗争 - 我会大胆猜测您正在从 php 编写 html 代码并且没有转义 $files 中的 $。无论如何,那是我的问题 - 应该是 \$files。
丹
【讨论】:
如何使用 AngularJS 将文件上传到 Google Drive
】如何使用AngularJS将文件上传到GoogleDrive【英文标题】:HowtouploadfiletoGoogleDrivewithAngularJS【发布时间】:2015-12-1110:07:12【问题描述】:我卡住了,我无法使用AngularJS将文件上传到GoogleDrive。现在我的客户想知道他们想使用AngularJS将... 查看详情
使用 AngularJS 上传文件
】使用AngularJS上传文件【英文标题】:FileUploadusingAngularJS【发布时间】:2013-09-0510:21:53【问题描述】:这是我的HTML表单:<formname="myForm"ng-submit=""><inputng-model=\'file\'type="file"/><inputtype="submit"value=\'Submit\'/></for 查看详情
使用 AngularJS 和 SpringMVC 进行多部分文件上传
】使用AngularJS和SpringMVC进行多部分文件上传【英文标题】:MultipartFileUploadusingAngularJSandSpringMVC【发布时间】:2017-07-2900:45:09【问题描述】:我是angularJS的新手,并尝试使用angularJS和SpringMVC上传文件,但无法获得所需的解决方案并... 查看详情
angularjs使用$httppost上传文件的时候,怎样获取文件上传的进度
参考技术A对比一下文件大小 查看详情
AngularJS:使用 $resource 上传文件(解决方案)
】AngularJS:使用$resource上传文件(解决方案)【英文标题】:AngularJS:Uploadfilesusing$resource(solution)【发布时间】:2014-02-0215:27:20【问题描述】:我正在使用AngularJS与RESTful网络服务进行交互,使用$resource来抽象暴露的各种实体。其... 查看详情
AngularJS:如何使用多部分表单实现简单的文件上传?
】AngularJS:如何使用多部分表单实现简单的文件上传?【英文标题】:AngularJS:howtoimplementasimplefileuploadwithmultipartform?【发布时间】:2012-12-0710:23:40【问题描述】:我想从AngularJS到node.js服务器做一个简单的多部分表单发布,表单的... 查看详情
在 MVC .net 核心中使用 Angularjs 上传文件和数据
】在MVC.net核心中使用Angularjs上传文件和数据【英文标题】:UploadFileandDatawithAngularjsinMVC.netcore【发布时间】:2021-09-1914:01:31【问题描述】:<inputtype="file"ng-model="ch.FileName"id="file"name="myFile"nchange="angular.element(this).scope().saveC 查看详情
如何在angularjs中使用ng-file上传裁剪和上传图像
】如何在angularjs中使用ng-file上传裁剪和上传图像【英文标题】:Howtocropanduploadaimageusingng-fileuploadinangularjs【发布时间】:2015-12-0114:04:24【问题描述】:您好,我正在尝试裁剪图像并使用angularjs中的ng-file上传来上传图像。裁剪后... 查看详情
angularjs使用$httppost上传文件的时候,怎样获取文件上传的进度
angular在1.5.5以上的版本中,在$http中也加入了eventHandler和uploadEventHandlers等方法,所以可以直接这样写:$http(method:'POST',url:url,eventHandlers:progress:function(c)console.log('Progress->'+c);console.log(c);,uploadEventHandlers:progress:function(e)co... 查看详情
angularjs上传图片
上传图片需要引入插件ngFileUpload,使用bower安装方法:bowerinstall ng-file-upload--save,安装后需要在命名app的名字js文件中注入,如下所示:(function(){angular.module(‘app‘,[‘ionic‘,‘ngStorage‘,‘ngFileUpload‘]);})();在相应的html中引入... 查看详情
在Laravel中通过AngularJs上传文件时获取值为null
】在Laravel中通过AngularJs上传文件时获取值为null【英文标题】:GettingvaluenullwhileuploadingfilethroughAngularJsinLaravel【发布时间】:2020-02-2704:32:19【问题描述】:当我尝试在AngularJs中使用POST请求上传文件时,我无法上传文件,因为它显... 查看详情
带有文件上传的AngularJs Ajax POST表单
】带有文件上传的AngularJsAjaxPOST表单【英文标题】:AngularJsAjaxPOSTformwithfileupload【发布时间】:2013-10-2501:33:53【问题描述】:我正在尝试设置一个表单,以使用ajax请求提交给已经使用Ajax构建的api。出于某种原因,文件只是不想传... 查看详情
如何在 AngularJS 部分文件中使用 php (wordpress) 函数?
】如何在AngularJS部分文件中使用php(wordpress)函数?【英文标题】:Howtousephp(wordpress)functionsinAngularJSpartialsfiles?【发布时间】:2016-05-1901:34:01【问题描述】:我正在使用angularjs加载我的wordpress帖子列表,但是我无法让我的任何php函... 查看详情
AngularJS 使用 ng-upload 上传图片
】AngularJS使用ng-upload上传图片【英文标题】:AngularJSUploadingAnImageWithng-upload【发布时间】:2013-06-1711:55:18【问题描述】:我正在尝试使用ng-upload在AngularJS中上传文件,但我遇到了问题。我的html看起来像这样:<divclass="create-articl... 查看详情
AngularJS文件上传抛出403 Forbidden - IIS Windows Server
】AngularJS文件上传抛出403Forbidden-IISWindowsServer【英文标题】:AngularJSFileUploadthrowing403Forbidden-IISWindowsServer【发布时间】:2021-10-0406:09:12【问题描述】:在我的应用程序中,我使用AngularJS文件上传来读取上传的excel文件。在我的控制... 查看详情
nodejs + multer + angularjs 无需重定向即可上传
】nodejs+multer+angularjs无需重定向即可上传【英文标题】:nodejs+multer+angularjsforuploadingwithoutredirecting【发布时间】:2016-01-0214:32:18【问题描述】:我正在使用Nodejs+Multer+angularjs在服务器上上传文件。我有一个简单的HTML文件:<formact... 查看详情
使用 Angular js 和 WebAPI 上传 excel 文件
】使用Angularjs和WebAPI上传excel文件【英文标题】:UploadexcelfilefromusingangularjsandWebAPI【发布时间】:2015-12-0611:52:29【问题描述】:我正在尝试使用Angularjs上传一个excel文件,将字符串数据发送到Webapi,然后将其转换为文件。但是,... 查看详情
使用 angularjs 从 PHP REST API 下载 docx 文件
】使用angularjs从PHPRESTAPI下载docx文件【英文标题】:downloaddocxfilefromPHPRESTAPIwithangularjs【发布时间】:2015-07-2617:09:30【问题描述】:我有一个用SLIM框架编写的PHPRESTAPI,我有一个api调用,它创建一个docx文件并强制下载该文件。$filen... 查看详情