Angularjs - 使用 php 上传文件

Posted 2023-02-22

【中文标题】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。

丹