Я использую ng2-file-upload (один пример загрузки), и я хочу использовать: ng2FileSelect с помощью кнопки или div вместо ввода файла. Как я могу это сделать?
Я хочу, чтобы это делалось примерно так:
<button ng2FileSelect [uploader]="uploader">Choose file</button>
Вместо:
<input type="file" ng2FileSelect [uploader]="uploader" />
Если не существует чистого пути, используя ng2-file-upload, вы знаете альтернативу?
Одним из возможных решений является использование Angular 2 шаблонных переменных и назначение переменной шаблона входному элементу; после выполнения вы можете напрямую вызывать методы, определенные на этом входе от другого элемента, например кнопки.
В одном из моих приложений я сделал следующее: он работает на IE11, Firefox и Chrome:
<button (click)="fileInput.click()" class="btn btn-default">Upload</button>
<span style="visibility: hidden; position: absolute; overflow: hidden; width: 0px; height:0px;border:none;margin:0; padding:0">
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" />
</span>
Таким образом, как вы можете видеть, кнопка просто вызывает событие click_fileInput в своем собственном событии кликов.
Обратите внимание, что я зарываю входные данные в пределах span, а затем скрываю диапазон от представления через кучу стилей, так что отображается только кнопка. Также обратите внимание, что применение этих стилей к входному элементу напрямую вызывало проблемы в IE11.
Yon может обернуть элемент input[file] элементом метки и скрыть его. См. этот ответ и этот пример
Здесь код.
HTML:
<label for="file-upload" class="custom-file-upload">
<i class="fa fa-cloud-upload"></i> Custom Upload
</label>
<input id="file-upload" type="file"/>
CSS
input[type="file"] {
display: none;
}
.custom-file-upload {
border: 1px solid #ccc;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}