如何在angularjs中获取输入类型文件的值？答案

【问题标题】：How to get values of input type file in angularjs?如何在angularjs中获取输入类型文件的值？
【发布时间】：2015-09-11 12:26:01
【问题描述】：

我正在使用 slim 框架在 angularjs 中创建简单的应用程序。在那，我正在为一些数据创建表单，如名称、类别、货币和图像文件等。在这个应用程序中，我在输入类型文件时遇到了问题。我可以获取文本框或单选按钮等的所有数据，但无法获取输入类型文件的数据。下面是代码。

index.html :- HTML 文件

<form method="POST" enctype="multipart/form-data" class="form account-form" name="form" ng-submit="creator(user)" role="form">
<input type="text" name="name" ng-model="user.name"  /> 

<input type="radio" name="category" ng-model="user.category" value="Science" >                                  
<input type="radio" name="category" ng-model="user.category" value="Engineerig" >

<input type="file" ng-model="user.image_file" name="image_file">
</form>

registerController.js :- 控制器文件

app.controller('CreatorController', function($scope,$rootScope,$location,$http,CreatorService,FlashService) {
    $scope.creator = function (user) {
      // alert("create");
        $scope.dataLoading = true;
         CreatorService.creator(user)
                .then(function (response) {   
                    if(response.data['message']){ 
                        FlashService.Success('Registration successful', true);
                        $location.path('/crete-page');
                    } else {
                        FlashService.Error('Registration failed');
                    }
                });
    }    
});

registerDB.php :- slim 框架目录中的 DB 处理程序 PHP 文件

 <?php

function insertUser($data) {

    print_r($data); //Getting All data here from form but not getting File values
}
?>

【问题讨论】：

ng-model for <input type="file"/>的可能重复

标签： javascript php angularjs slim

【解决方案1】：

如果你想将它发送到服务器，你不能只接收文件并发送它，有时你必须将它转换为 blob 或其他东西。

我找到了这个fiddle

don't know if it works but you can try. (stupid stackoverflow makes me put code after a fiddle link, wtf!)

否则你可以使用angular-file-upload，至少当我尝试做类似的事情时我使用的是。但是我在服务器上使用 nodejs，甚至在服务器上我必须使用另一个特定于这种情况的库来接收。不知道它是如何与 php 一起工作的。

GL！

【讨论】：

【解决方案2】：

这可能是老问题，但我遇到了同样的问题，这就是我解决它的方法。

将此代码添加到 registerController.js

function getPath() {
        $('#filePath ').on('change',function ()
        {
            var filePath = $(this).val();
            $scope.fileURL = filePath;
        });
    }
getPath();

$scope.fileURL 将保存输入文件的数据/值。然后，您可以将 user.image_file 设置为此值“$scope.fileURL” 你的 html 应该是

<input id="filePath " type="file" ng-model="user.image_file" name="image_file">

希望对你有帮助

【讨论】：