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启用，这样我就可以点击它并上传文件。

我真正想要的是能够直接点击按钮，这样我就可以选择一个文件，然后在选择文件后自动上传文件。

我已通过ng-click="uploader.uploadAll()"

更改onclick="$('#myUploader').trigger('click');"来完成第一部分

我现在的问题是，在选择文件后，我不知道如何触发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) {
	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 />

在Angularjs中单击按钮时上载文件

2 个答案: