Question

我正在玩AngularJS并且无法解决这个问题。我有一个视图，其中包含将文件上载到节点服务器的表单。到目前为止，我已经设法使用一些指令和服务。我允许用户根据需要向POST数据发送自定义名称。我要完成的是，当用户选择文件时，filename模型会自动填充。

我的观点如下：

<div>
    <input file-model="phpFile" type="file">
    <input name="filename" type="text" ng-model="filename">
    <button ng-click="send()">send</button>
</div>

file-model是我的指令，允许将文件分配给范围。

myApp.directive('fileModel', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse.(attrs.fileModel);
            var modelSetter = model.assign;
            element.bind('change', function() {
                scope.$apply(function() {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        } 
}]);

服务：

myApp.service('fileUpload', ['$http', function($http){
    this.uploadFileToUrl = function(file, uploadUrl, optionals) {
        var fd = new FormData();
        fd.append('file', file);
        for (var key in file) {
            fd.append(key, file[key]);
        }
        for(var i = 0; i < optionals.length; i++){
            fd.append(optionals[i].name, optionals[i].data);
        }
    });
}]);

在这里，您可以看到我传递文件，附加其属性，并附加任何可选属性。

在控制器中我遇到了麻烦。我尝试了$watch并使用了file-model，但无论如何都会出现同样的错误。

myApp.controller('AddCtrl', function($scope, $location, PEberry, fileUpload){
    //$scope.$watch(function() {
    //    return $scope.phpFile;
    //},function(newValue, oldValue) {
    //    $scope.filename = $scope.phpFile.name;
    //}, true);
    // if ($scope.phpFiles) {
    //     $scope.filename = $scope.phpFiles.name;
    // }
    $scope.send = function() {
        var uploadUrl = "/files";
        var file = $scope.phpFile;
        //var opts = [{ name: "uname", data: file.name }]

        fileUpload.uploadFileToUrl(file, uploadUrl);
    };
});

感谢您的帮助！

Answer 1

我在一个项目上有类似的问题。我使用这个library来解决它。

我在HTML文件中的输入是：

<input type="file" ng-file-select="onImageFileSelect($files, $event);" accept="image/*" >

在我的控制器中，我有一个功能（该功能的某些部分被编辑）：

$scope.onImageFileSelect = function($files, event) {
    $scope.userInfo.image.file = $files[0];
}

设置范围，以便在我的HTML文件中，我可以使用以下方式打印文件名：

<div>{{userInfo.image.file.name}}</div>

由于用户正在为其帐户上传个人资料图片，因此我希望他们能够自动查看缩略图。为此我使用了另一个名为fileReader的库来包装Javascript文件读取器功能。

使用AngularJS基于文件名自动填充输入

1 个答案: