用图像替换 CHOOSE FILE答案

【问题标题】：Replace CHOOSE FILE with an image用图像替换 CHOOSE FILE
【发布时间】：2020-01-29 05:09:08
【问题描述】：

您好，我正在尝试用图像替换选择文件按钮。我正在使用 javascript 创建按钮，但是当我检查网站时，它向我显示了 type= 文件的按钮的 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;
}

谁能建议我如何用图像更改通用按钮。

【问题讨论】：

我不确定您是否可以将按钮更改为图像，但我过去使用的一种方法是创建一个不可见的按钮。然后，在图片的点击事件中，触发文件输入按钮的点击。
Replace input type=file by an image的可能重复
@weegee 我已经通过了这个解决方案，但没有一个对我来说是成功的解决方案。
@RockyJohanson 那么你应该在问题中提到，什么不起作用以及你尝试了什么。显然没有什么与你的方法相匹配。您是否尝试了那里的所有答案？
@weegee 我尝试在 html 文件中包含这些方法，但它只是创建了另一个通用按钮

标签： javascript html css p5.js input-type-file

【解决方案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>

【讨论】：