如何使用angularjs删除图像

时间:2015-07-07 15:31:05

标签: html angularjs

我是angularjs的新手。我成功地使fileuploader工作并显示上传的文件。现在我想删除我不想要的文件。

以下是我的上传和展示的工作原理。

html文件

 <div class="container-fluid">
    <error-display error-display-api="errorDisplayApi"></error-display>
    <div ng-controller="complianceItemDocumentcontroller">

        <div class="form-inline">
            <span class="btn btn-default">
                Add Photo
                <input ng-model="file"
                       onchange="angular.element(this).scope().file_changed(this)"
                       type="file" accept="image/*">
            </span>
            <button ng-click="removeFile()">Delete Photo</button>   
        </div>
        <div ng-repeat="images in document">
            <label name ="desscription" ng-bind ="images.Description"></label><br>
        </div>
    </div>
</div>

javascript文件

app.controller('complianceItemDocumentcontroller', ['$scope', '$http',     function ($scope, $http)
{       
    var url = "http://localhost:/....";
    $http.get(url)
            .success(function (data, status, headers, config)
             {
                $scope.document = data;
             })
             .error(function (data, status, headers, config)
             {
                $scope.document = undefined;
             });        
    $scope.removeFile = function()
        {
            alert("delete");
        };
    $scope.file_changed = function(element)
        {
            $scope.$apply(function (scope)
            {
                var fd = new FormData();
                fd.append('file', element.files[0]);
                var urlpost = "http/.....";
                var req = { method: 'POST', url: urlpost, headers: { 'Content-    Type': undefined }, data: fd} 
                $http(req)
                .success(function (data, status, headers, config)
                {
                    alert("uploaded");
                })
                .error(function (data, status, headers, config)
                {
                    alert("fail");
                });
            });
        }
}]);

我应该能够选择列表中的图像,并根据文件的选择我应该能够调用相关的API来使用文档ID删除文档。 我无法弄清楚如何选择文件,并在选中后获取文档ID。然后我将通过httppost调用该方法,这将删除数据库中的文件。此外,我应该能够显示缩略图可用的图像。目前它只是一个简单的文件名列表。

感谢您的时间和建议。

0 个答案:

没有答案