單擊多次文件對話框時會多次打開AngularJS

我指的是link，用於使用AngularJS創建文件上傳功能。單擊多次文件對話框時會多次打開AngularJS

當我點擊「選擇文件」，不止一次，仍然當對話框沒有打開，甚至一度，選擇文件，當對話開闢了第一時間之後，我仍然可以看到一個接一個地打開多個對話框。

如何解決這個問題？

讓我知道它。

來源

2016-08-23 Shashank

我不確定你可以做些什麼，除了自己修改源代碼，並使用修改後的版本。您描述的行爲可以很容易地在您鏈接的頁面上重現。但是，真的有什麼大不了的？即使窗口多次打開，也只能一次選擇一個文件。 –

@JoelCDoyle，可以使用哪些修改版本？請詳細說明一下。雖然，只能選擇一次，但如果一次按下按鈕10次，則一次又一次選擇相同的文件並不是一個好主意。而且，從用戶的角度來看，這不是一個好的行爲。 – Shashank

您必須自己修改源代碼才能獲得不同的行爲。這是一個很大的假設，你想要的行爲甚至有可能實現。瀏覽器的設計可能不會對ng-file-upload進行任何修改，而這些修改會產生變化。對於這麼小的東西來說，這似乎有很多工作要做。 –

這是因爲你使用NG-模式在您的按鈕。代替ng-model你必須編寫你自己的定製指令。爲了文件輸入，避免使用按鈕。更好的辦法是使用文件輸入標籤，如下圖所示：

Angularjs：

myApp.directive('fileModel', ['$parse', function ($parse) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var model = $parse(attrs.fileModel); 
     var modelSetter = model.assign; 
     element.bind('change', function() { 
      scope.$apply(function() { 
       modelSetter(scope, element[0].files[0]); 
      }); 
     }); 
    } 
    } 
    }]);

HTML：

<input id="chooseFile" type="file" file-model="file" name="Attachment" multiple/>

希望這將鍛鍊。

來源

2016-09-02 06:51:25

雖然我無法通過創建演示來複制報告的問題，但是當我將它們合併到我的應用程序中時，我仍然可以複製它。 – Shashank

@Shashank，你可以發佈你的編輯代碼嗎？ –

我已經使用AngularJS 1.5.1更新了ng-file-upload的樣本，如下面的代碼。你可以試着讓我知道結果嗎？

//inject angular file upload directives and services. 
 
var app = angular.module('fileUpload', ['ngFileUpload']); 
 

 
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout', function ($scope, Upload, $timeout) { 
 
    $scope.uploadPic = function(file) { 
 
    file.upload = Upload.upload({ 
 
     url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
 
     data: {username: $scope.username, file: file}, 
 
    }); 
 

 
    file.upload.then(function (response) { 
 
     $timeout(function() { 
 
     file.result = response.data; 
 
     }); 
 
    }, function (response) { 
 
     if (response.status > 0) 
 
     $scope.errorMsg = response.status + ': ' + response.data; 
 
    }, function (evt) { 
 
     // Math.min is to fix IE which reports 200% sometimes 
 
     file.progress = Math.min(100, parseInt(100.0 * evt.loaded/evt.total)); 
 
    }); 
 
    } 
 
}]);

.thumb { 
 
    width: 24px; 
 
    height: 24px; 
 
    float: none; 
 
    position: relative; 
 
    top: 7px; 
 
} 
 

 
form .progress { 
 
    line-height: 15px; 
 
} 
 
} 
 

 
.progress { 
 
    display: inline-block; 
 
    width: 100px; 
 
    border: 3px groove #CCC; 
 
} 
 

 
.progress div { 
 
    font-size: smaller; 
 
    background: orange; 
 
    width: 0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.min.js"></script> 
 
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload-shim.js"></script> 
 
<script src="https://angular-file-upload.appspot.com/js/ng-file-upload.js"></script> 
 

 

 

 
<body ng-app="fileUpload" ng-controller="MyCtrl"> 
 
    <form name="myForm"> 
 
    <fieldset> 
 
     <legend>Upload on form submit</legend> 
 
     Username: 
 
     <input type="text" name="userName" ng-model="username" size="31" required> 
 
     <i ng-show="myForm.userName.$error.required">*required</i> 
 
     <br>Photo: 
 
     <input type="file" ngf-select ng-model="picFile" name="file"  
 
      accept="image/*" ngf-max-size="2MB" required 
 
      ngf-model-invalid="errorFile"> 
 
     <i ng-show="myForm.file.$error.required">*required</i><br> 
 
     <i ng-show="myForm.file.$error.maxSize">File too large 
 
      {{errorFile.size/1000000|number:1}}MB: max 2M</i> 
 
     <img ng-show="myForm.file.$valid" ngf-thumbnail="picFile" class="thumb"> <button ng-click="picFile = null" ng-show="picFile">Remove</button> 
 
     <br> 
 
     <button ng-disabled="!myForm.$valid" 
 
       ng-click="uploadPic(picFile)">Submit</button> 
 
     <span class="progress" ng-show="picFile.progress >= 0"> 
 
     <div style="width:{{picFile.progress}}%" 
 
      ng-bind="picFile.progress + '%'"></div> 
 
     </span> 
 
     <span ng-show="picFile.result">Upload Successful</span> 
 
     <span class="err" ng-show="errorMsg">{{errorMsg}}</span> 
 
    </fieldset> 
 
    <br> 
 
    </form> 
 
</body>

來源

2016-08-27 18:24:13 trungk18

我仍然可以在您的示例中複製該問題。 – Shashank

您是否嘗試過在Firefox和IE上測試過？ – trungk18

我在問題中包含的鏈接本身在FF中沒有問題。雖然，我沒有在IE中試過，但我所針對的主要瀏覽器是Chrome本身。如果它在Chrome中運行，這就足夠了。 – Shashank

的問題似乎是與你的js file.Try及如何使用foreach循環約束，同時上傳新文件，該文件將遞歸調用一個新的上傳每次。例子：

angular.forEach(files, function(file) { 
     file.upload = Upload.upload({ 
      url: 'https://angular-file-upload-cors-srv.appspot.com/upload', 
      data: {file: file} 
     });`

請參閱本的jsfiddle：http://jsfiddle.net/danialfarid/2vq88rfs/136/

來源

2016-09-02 05:42:26 Technologeek

我正在使用單個文件本身。無論如何，這個問題仍然存在於你的演示中。 – Shashank

這不是我的ng-fileupload github官方文檔的演示。 – Technologeek

單擊多次文件對話框時會多次打開AngularJS

回答

相關問題