在Angularjs中點擊按鈕時上傳文件

Question

我目前有button和file input字段來上傳文件。

按鈕

<button type="button" class="btn btn-success pull-right" ng-click="uploader.uploadAll()">Upload</button> 

輸入字段

<input id="myUploader" type="file" uploader="uploader"> 

目前，我首先要選擇一個文件，然後使用input field，然後我button使得本身，這讓我點擊它並上傳文件。

我真正想要的是能夠直接點擊按鈕，它允許我選擇一個文件，然後在選擇它之後自動上傳文件。

我已經與onclick="$('#myUploader').trigger('click');"

我的問題改變ng-click="uploader.uploadAll()"完成了第一部分，現在是，我不知道如何觸發uploader.uploadAll()function選擇了文件之後。

任何人都可以幫助我嗎？

Answer 1

您可以在輸入字段上偵聽更改事件。

不幸的是ng-change似乎沒有處理文件輸入。因此有必要使用onchange。

要從事件處理函數內部訪問角度範圍，您可以使用angular.element(this).scope()。最終結果如下：

<input id="myUploader" type="file" uploader="uploader" onchange="angular.element(this).scope().uploader.uploadAll()"> 

另請參閱this related question。

Answer 2

我不知道我在解決你的問題方面做得很好，因爲我沒有用角度去做，但我想你可能會發現這個貢獻很有用，所以我會分享它。我首先通過閱讀html5rocks.com上的文章Reading files in JavaScript using the File APIs來找到解決此任務的參考。

我最近在一個項目中完成了這個特定的任務，並且完成了一個處理多個文件上傳的完整演示。你可以修剪下來，以適應只有一個文件您的需求，但這裏是所有的代碼和代碼段嘗試一下在：

var totalDocumentCount = 0; 
 
var totalDocumentsProcessed = 0; 
 
var mapDocuments = {}; //a new object, maybe used as associative array 
 

 
function parseXML(evt, file) { 
 
\t var key = file.name; 
 
\t var value = evt.target.result; 
 
    
 
    //you could store a reference to each document in an associative array 
 
\t mapDocuments[key] = value; 
 

 
\t if (++totalDocumentsProcessed === totalDocumentCount) { 
 
     //do something after the last file is uploaded 
 
\t } 
 
} 
 

 
//handles more than one file, but also works for a single file 
 
function onFilesSelected(event) { 
 
\t var files = event.target.files; // FileList object 
 
\t totalDocumentCount = files.length; 
 
\t for (var i = 0, f; f = files[i]; i++) { 
 
\t \t var fileReader = new FileReader(); 
 
\t \t fileReader.onloadend = (function (file) { //returns asynchronous, so i wrap in a closure 
 
\t \t \t return function (evt) { 
 
\t \t \t \t parseXML(evt, file) 
 
\t \t \t } 
 
\t \t })(f); 
 
\t \t fileReader.readAsText(f); 
 
\t } 
 
} 
 

 
document.getElementById('files').addEventListener('change', onFilesSelected, false);

<input type="file" id="files" name="files[]" multiple />