1

我现在有 afbutton和一个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使能本身，这允许我单击它并上传文件。

我真正想要的是能够直接点击按钮，它允许我选择一个文件，然后在选择后自动上传文件。

我已经完成了第一部分，通过ng-click="uploader.uploadAll()"改变onclick="$('#myUploader').trigger('click');"

我现在的问题是我不知道如何uploader.uploadAll() function在选择文件后触发。

有谁能够帮我？

4

2 回答 2

1

我不知道我在准确解决您的问题方面做得很好，因为我没有使用 Angular 来做这件事，但我认为您可能会发现这个贡献很有帮助，所以我会分享它。我首先通过阅读文章并尝试使用html5rocks.com 上的文件 API 读取 JavaScript 中的文件中的示例找到了解决此任务的参考。

我最近参与了一个具有此特定任务的项目，并且有一个完整的演示来处理多个文件的上传。您可以将其缩小以满足您对一个文件的需求，但这里有所有代码和一个片段来试用它：

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

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

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

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

document.getElementById('files').addEventListener('change', onFilesSelected, false);
<input type="file" id="files" name="files[]" multiple />

于 2015-04-08T02:53:49.383 回答
1

您可以在输入字段上侦听更改事件。

不幸的是ng-change，似乎没有使用文件输入。因此有必要使用onchange.

要从事件处理程序内部访问角度范围，您可以使用angular.element(this).scope(). 最终结果将如下所示：

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

另请参阅此相关问题。

于 2015-04-08T01:17:59.527 回答