Question

目前这是品牌列表页面的样子。

enter image description here

当用户点击“选择图片”按钮时，我设置updateMode = 1，使删除和上传按钮可见。

问题是有时用户在单击上传按钮后没有选择图像，而是在文件选择窗口中按取消。那个时候还删除和上传按钮变得可见。我想避免这种情况。

当用户点击删除时，我希望输入文字变空。

这是我的HTML代码。

<tr ng-repeat="b in Brands | filter:SearchText |orderBy:'name'">
    <td>
        <span data-ng-hide="editMode">{{b.name}}</span>

        <input type="text" data-ng-show="editMode" data-ng-model="b.name" data-ng-required />
        <input type="text" data-ng-show="editMode" data-ng-model="b.image" data-ng-required />

        <br><br>
        <input type="text" ng-model="b.files[0].name" readonly="readonly">

        <button ngf-select ng-model="b.files" class="btn btn-success btn-sm" ng-click="uploadMode=1">
            <span class="glyphicon glyphicon-picture"></span> Pick Image
        </button>

        <button data-ng-hide="!uploadMode" class="btn btn-danger btn-sm" ng-click="uploadMode=0">
            <span class="glyphicon glyphicon-trash"></span> Delete
        </button>


        <button data-ng-hide="!uploadMode" class="btn btn-info btn-sm" ng-click="upload(b.files, b.image)">
            <span class="glyphicon glyphicon-upload"></span> Upload
        </button>



    </td>
    <td><img src="http://localhost/{{ b.image }}" alt="" border=3 height=75 width=75><br><br>


    </td>

这是文件上传代码。

$scope.upload = function (files, path) {
    //alert ('upload');
    //alert (path);
    //alert (files);
    if (files && files.length) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            Upload.upload({
                url: '/cgi-bin/upload.pl',
                fields: {
                    'FilePath': path
                },
                file: file
            }).progress(function (evt) {
                var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                $scope.log = 'progress: ' + progressPercentage + '% ' +
                            evt.config.file.name + '\n' + $scope.log;
            }).success(function (data, status, headers, config) {
                $timeout(function() {
                    $scope.log = 'file: ' + config.file.name + ', Response: ' + JSON.stringify(data) + '\n' + $scope.log;
                });
            })
            .error(function (data, status, headers, config) {
                alert ('Error');
            });

        }
    }
};

我应该做出哪些改变以获得上述功能。请帮忙。

Answer 1

您需要使用ng-file-upload插件中提供的ngf-change

而不是ng-click，将其更改为HTML标记中的ngf-change

<button ngf-select ng-model="b.files" ngf-change="fileSelected($files, $event, b)">
    <span class="glyphicon glyphicon-picture"></span> Pick Image
</button>

将ng-repeat对象作为第3个参数传递给fileSelected函数，并在控制器中将其定义为

$scope.fileSelected = function(files, events, b) {
  if (files.length) {
    b.uploadMode = true;
  } else {
    b.uploadMode = false;
  }
};

这里我们检查文件对象是否为空（注意：在文件选择对话框打开时和成功选择文件时调用ngf-change）并将uploadMode参数设置为true或false。

对于删除文件功能，创建一个函数，在单击“删除”按钮时调用该函数并传递ng-repeat对象

<button ng-if="b.uploadMode" ng-click="removefile(b)">
    <span class="glyphicon glyphicon-trash"></span> Delete
</button>

在控制器中，定义了removefile函数，删除文件对象

$scope.removefile = function(b) {
  delete b.files;
  b.uploadMode = false;
};

请参阅http://plnkr.co/edit/zmZwiqJOLVILaCmc4uBQ?p=preview

上的工作演示

如何在angularJS中获取文件选择完成事件

1 个答案: