Пример формы загрузки файла на Bootstrap 4. Сниппет поможет вам разместить на сайте эту форму и уникализировать под дизайн сайта.
HTML:
<div class="container p-y-1"> <div class="row m-b-1"> <div class="col-sm-6 offset-sm-3"> <button type="button" class="btn btn-primary btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button> <div class="form-group inputDnD"> <label class="sr-only" for="inputFile">File Upload</label> <input type="file" class="form-control-file text-primary font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file"> </div> </div> </div> <div class="row m-b-1"> <div class="col-sm-6 offset-sm-3"> <button type="button" class="btn btn-success btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button> <div class="form-group inputDnD"> <label class="sr-only" for="inputFile">File Upload</label> <input type="file" class="form-control-file text-success font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file"> </div> </div> </div> <div class="row m-b-1"> <div class="col-sm-6 offset-sm-3"> <button type="button" class="btn btn-warning btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button> <div class="form-group inputDnD"> <label class="sr-only" for="inputFile">File Upload</label> <input type="file" class="form-control-file text-warning font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file"> </div> </div> </div> <div class="row m-b-1"> <div class="col-sm-6 offset-sm-3"> <button type="button" class="btn btn-danger btn-block" onclick="document.getElementById('inputFile').click()">Add Image</button> <div class="form-group inputDnD"> <label class="sr-only" for="inputFile">File Upload</label> <input type="file" class="form-control-file text-danger font-weight-bold" id="inputFile" accept="image/*" onchange="readUrl(this)" data-title="Drag and drop a file"> </div> </div> </div> </div>
CSS(scss)
.inputDnD { .form-control-file { position: relative; width: 100%; height: 100%; min-height: 6em; outline: none; visibility: hidden; cursor: pointer; background-color: #c61c23; box-shadow: 0 0 5px solid currentColor; &:before { content: attr(data-title); position: absolute; top: 0.5em; left: 0; width: 100%; min-height: 6em; line-height: 2em; padding-top: 1.5em; opacity: 1; visibility: visible; text-align: center; border: 0.25em dashed currentColor; transition: all 0.3s cubic-bezier(.25, .8, .25, 1); overflow: hidden; } &:hover { &:before { border-style: solid; box-shadow: inset 0px 0px 0px 0.25em currentColor; } } } } // PRESENTATIONAL CSS body { background-color: #f7f7f9; }
JS(Babel)
function readUrl(input) { if (input.files && input.files[0]) { let reader = new FileReader(); reader.onload = (e) => { let imgData = e.target.result; let imgName = input.files[0].name; input.setAttribute("data-title", imgName); console.log(e.target.result); } reader.readAsDataURL(input.files[0]); } }
Примет того, что получится после внедрения, все просто изменить под свой сайт. Время внедрения минимальное.