2

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

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

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

请帮助我。

代码

<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));
            });
        }
    }


});
4

0 回答 0