Задача стояла следующая: сделать отправку файла с сопутствующими полями. Бакэнд был соответствующим образом подготовлен. Протестирован со статической формой:
<!DOCTYPE html>
<html>
<body>
<form method="post" action="api/content/upload" enctype="multipart/form-data">
<input type="hidden" name="param1" value="1"/>
<input type="hidden" name="param2" value="109"/>
<input type="file" name="file"/>
<input type="submit"/>
</form>
</body>
</html>
Попробовал пару вариантов, но получилось у меня только с использованием библиотеки ScriptJava. Ссылку в конце дам на нее.
У меня таблица, к каждой строке которой может назначаться картинка. Эту картинку я выбираю нажатием на кнопку. Затем при нажатии кнопки сохранения посылается запрос на сохранение текстовых полей и второй запрос на Upload файла с картинкой.
HTML шаблон (я несколько сократил пример):
<div ng-repeat="scheme in schemes">
<form method="post" enctype="multipart/form-data" id="form_{{$index}}">
<input type="hidden" value="{{scheme.param1}}" name="param1"/>
<input type="hidden" value="{{scheme.param2}}" name="param2"/>
<input type="file" id="schemefile{{$index}}" name="file"
onchange="angular.element(this).scope().scheme.upload=true"
style="height: 0;width:0;display: none"/>
<button id='btn-upload' class="btn btn-info btn-sm" ng-click="clickFileUpload($index)"><span class="glyphicon glyphicon-download-alt"></span></button>
<button class="btn btn-sm btn-success" ng-click="saveScheme($index)"
<span class="glyphicon glyphicon-floppy-disk"></span>
</button>
</form>
</div>
Строка
onchange="angular.element(this).scope().scheme.upload=true"
нужна для того, чтобы определить, был ли произведен выбор файла.
В контроллере:
$scope.clickFileUpload = function(index) {
$('#schemefile' + index).click();
}
$scope.saveScheme = function(index) {
.....
if ($scope.schemes[index].upload) {
$$f({
formid: "form_" + index,
url: 'api/upload'
});
}
}
Комментариев нет:
Отправить комментарий