Заменить ВЫБЕРИТЕ ФАЙЛ с изображением - PullRequest
Новая
       18

Заменить ВЫБЕРИТЕ ФАЙЛ с изображением

0 голосов
/ 29 сентября 2019

Привет. Я пытаюсь заменить кнопку выбора файла изображением. Я использую javascript для создания кнопки, но когда я проверяю веб-сайт, он показывает мне HTML-скрипт кнопки, которая имеет тип = файл.

Для его создания я использовал: 

input = createFileInput(handleFile);
    input.elt.style["width"] = "40%";
    input.elt.style["font-size"]="3vmin";

function handleFile(file) {
    print(file);
    if (file.type === 'image') {
        imgFile = file.data;
        img = createImg(file.data);
        img.hide();
        canvas.image(img, 0, 0, 224, 224);
        image(img, 0, 0, width, height/2);
        img.remove();
    }
    mode = 1;
    tint = false;
}

Может кто-нибудь подсказать, как можно изменить универсальную кнопку с изображением.

1 Ответ

0 голосов
/ 30 сентября 2019

Я думаю, что вы можете обмануть и расположить изображение над входом, затем добавить обработчик щелчков к изображению и передать его кнопке ввода ниже.

Это то, что вы пытаетесь достичь? 

const input = document.querySelector("#avatar");
const button = document.querySelector("#button");

button.addEventListener('click', event => input.click(event));
.body {
  font-family: sans-serif;
}

label {
  display: inline-block;
  padding: 1em 0;
}

.wrapper {
  position: relative;
}

#avatar {
  display: block;
  height: 50px;
  border: 1px solid #333;
}

#button {
  position: absolute;
  left: 1px;
  top: 1px;
}
<div class="body">
  <label for="avatar">Choose a profile picture:</label>
  <div class="wrapper">
    <input type="file" id="avatar" name="avatar">
    <img id="button" src="https://via.placeholder.com/75x50/333333/ffffff?text=Avatar"></img>
  </div>
</div>
...