Question

我想让用户只使用Angular JS文件上传插件（https://github.com/danialfarid/angular-file-upload）上传* .txt文件。我有以下问题：

不知何故，当我将.txt文件拖到dropbox时，dropbox div的类不会更改为accept-class（=“dragover”），但将是拒绝类（=“dragover-err”） “）。有人看到错误吗？

HTML：

<input id="upload" type="file" ng-model="files" ng-file-select="onFileSelect($files)" ng-accept="'.txt'">
<button ng-click="clickUpload()" class="button-file-upload">Datei hochladen</button>

<div ng-file-drop ng-model="files" class="drop-box"
        ng-multiple="false" allow-dir="false"
        ng-accept="'.txt'" ng-show="!fileUploadFinished"                 
        drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

<div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>

JS：

app.controller('fileUploadCtrl', function($rootScope, $scope, $upload) {
    $scope.fileUploadFinished = false;

    $scope.$watch('files', function () {
        $scope.onFileSelect($scope.files);
    });

    $scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: 'system/upload.php',
                method: 'POST',
                file: file
            }).progress(function(evt) { 
                 // progress bar ... 
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
            });
        }
    };
});

修改我通过插件的创建者改编了小提琴，并添加了accept和ng-class指令，目的是只在拖动txt文件时获得绿色边框。它仍然无法正常工作。任何人都知道这个伎俩吗？ http://jsfiddle.net/nmdcwf3w/166/

Answer 1

如果您删除了代码，则代码中有一个手表，那么您的代码将正常运行。

HTML

<div ng-app="myApp">
    <div ng-controller="fileUploadCtrl">


<div  ng-model="files" class="drop-box"
        ng-multiple="false" allow-dir="false"
        ng-accept="'.txt'" ng-show="!fileUploadFinished"                 
        drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

<div ng-no-file-drop>File Drag/Drop is not supported for this browser</div>
    </div>
    </div>

的js

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

app.controller('fileUploadCtrl', function($rootScope, $scope, $upload) {

     $scope.$watch('files', function () {
        $scope.onFileSelect($scope.files);
    });
    $scope.fileUploadFinished = false;
    $scope.onFileSelect = function($files) {
        for (var i = 0; i < $files.length; i++) {
            var file = $files[i];
            $scope.upload = $upload.upload({
                url: 'system/upload.php',
                method: 'POST',
                file: file
            }).progress(function(evt) { 
                 // progress bar ... 
            }).success(function(data, status, headers, config) {
                // file is uploaded successfully
            });
        }
    };
});

更新了js link

Answer 2

在 ng-file-drop

之后写 ng-file-select

在JSFIDDLE中使用以下代码替换div标记：

<div ng-file-drop  ng-file-select ng-model="files" class="drop-box" ng-multiple="false" allow-dir="false" ng-accept="'.txt'" ng-show="!fileUploadFinished" drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}" ng-hide="fileUploadFinished">Drop Images or PDFs files here</div>

Answer 3

我遇到了同样的问题。这是因为我忘了添加

ngf-pattern="'image/*'"

Angular JS文件上传：ng-accept无法正常工作

3 个答案: