Загрузить файл при нажатии кнопки в Angularjs

На данный момент у меня есть поля 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 после выбора файла.

Кто-нибудь может мне помочь?


javascript angularjs angular-file-upload
person Backer    schedule 07.04.2015    source источник
comment
вы нашли решение для этого?   -  person Vilas Kumkar    schedule 04.03.2016

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете прослушивать события изменения в поле ввода.

К сожалению, ng-change, похоже, не работает с вводом файлов. Поэтому необходимо использовать onchange.

Чтобы получить доступ к угловой области изнутри обработчика событий, вы можете использовать angular.element(this).scope(). Окончательный результат будет выглядеть так:

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

См. также этот связанный вопрос.

person just95    schedule 08.04.2015
comment
Я пытался добавить, что вы input field, но uploader.uploadAll() не срабатывает. Никаких ошибок в консоли или чего-то вообще - person Backer; 08.04.2015

arrow_upward
1
arrow_downward

Я не знаю, хорошо ли я отвечаю на ваш вопрос, поскольку я не делаю этого с angular, но я думаю, что вы можете найти этот вклад полезным, поэтому я поделюсь им. Впервые я нашел ссылку на решение этой задачи, прочитав сообщение и попробовав примеры на Чтение файлов в JavaScript с использованием файловых API на сайте html5rocks.com.

Недавно я работал над проектом с этой конкретной задачей, и у меня есть полностью проработанная демонстрация для обработки загрузки нескольких файлов. Вы можете обрезать его в соответствии с вашими потребностями только для одного файла, но вот весь код и фрагмент, чтобы попробовать его:

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 />

person ThisClark    schedule 08.04.2015