如何在ng-file-upload

时间:2015-10-16 11:52:17

标签: angularjs angularjs-directive ng-file-upload

我正在使用 ng-file-upload 模块,我使用 ngf-pattern 来限制只允许上传的图片文件类型。如果有人上传了错误的文件类型,那么,我需要显示一个应向用户显示错误框的框上传的文件类型无效

在我的下面的代码中,例如,我在 ngf-pattern 上使用了支持的图像文件类型 jpg 。如果我上传 png 文件

,我应该显示错误

同样,我想在上传错误文件类型时显示错误。

请帮我解决这个问题。

HTML CODE

<div ng-controller="AssetsUploadController">
<div class="assetsUploadSection">
<div ngf-drop="uploadFiles($files, $invalidFiles)" class="assets-drop-box" ngf-drag-over-class="assets-dragover" ngf-multiple="true" ngf-pattern="'image/jpg,image/jpeg,videos/*,application/pdf'"><img src="dragDrop.png"/>
  <button ngf-select="uploadFiles($files, $invalidFiles)" multiple type="button">Upload Assets</button></div></div>
 </div>

角度代码

var app = angular.module('myApp', ['ngFileUpload']);

 app.controller('ImageController', function ($scope, Upload,$timeout) {

    $scope.upload = function (file) {
        Upload.upload({
            url: 'upload/url',
            data: {file: file, 'username': $scope.username}
        }).then(function (resp) {
            console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
        }, function (resp) {
            console.log('Error status: ' + resp.status);
        }, function (evt) {
            var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
            console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
        });
    };

    $scope.uploadFiles = function (files) {
        $scope.files = files;
        console.log('upload files'+ files);
        if (files && files.length) {
            Upload.upload({
                url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                data: {
                    files: files
                }
            }).then(function (response) {
                $timeout(function () {
                    $scope.result = response.data;
                });
            }, function (response) {
                if (response.status > 0) {
                    $scope.errorMsg = response.status + ': ' + response.data;
                }
            }, function (evt) {
                $scope.progress =
                        Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            });
        }
    }


});

0 个答案:

没有答案