用图像替换 CHOOSE FILE

Question

您好，我正在尝试用图像替换选择文件按钮。我正在使用 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;
}

任何人都可以建议我如何用图像更改通用按钮。

Answer 1

我认为您可以作弊并将图像放置在输入上，然后向图像添加点击处理程序并将其传递到下面的输入按钮。

这是您要实现的目标吗？

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>

用图像替换 CHOOSE FILE

Replace CHOOSE FILE with an image

html

javascript

css

input-type-file

p5.js