Javascript 如何使用html代码从本地文件中选择图像

大家好，我被要求使用HTML CSS和JS设计一个小页面，如下所示，但我遇到了一个问题。当我们单击+视觉表达式时，会要求它从本地文件夹中选择一个视觉对象并进行预览，但我没有成功。我试着用来做，不确定我是否清楚地理解了你的问题，但可能是同时使用标签标签和输入[type=file]标签，并将输入的display属性设置为none，如下所示：

<div id="imgbox">
      <label for="file"><img src="./images/Button.png" alt="" /></label>
      <input type="file" name="file" id="file" style="display: none;"/>
</div>

---

也许这种变体适合您：

<div id="imgbox"> <img id="imgsrch" name="imgsrch" src="images/Button.png" width="120px" 
onClick="imageReflesh(imgsrch)"></div>

<input style="display: none" id="myInputForm" type="file">

<script language="javascript">
function imageReflesh(imgsrch){document.getElementById("myInputForm").click();}
</script>

---

这个问题分为两个部分：

获取它，以便用户可以从本地文件存储中选择图像 单击加号 将选定图像显示为预览 如果使用type=file的输入元素，用户可以选择一个文件。但是，最好是直接将他们带到系统中的选择方法，而不是看到标准的HTML输入元素

我们可以通过隐藏输入元素并单击加号来创建对输入元素的单击

选择文件后，我们只能看到其名称，而不能看到完整的本地路径。这是出于安全原因，因此我们不能仅加载预览图像的src属性。相反，我们必须读取文件并将内容放入预览图像中

下面是一个代码片段，它完成了这两件事。当然，您会希望以迷你页面所需的方式格式化内容

const plusSign=document.querySelector'plusSign'； const getFile=document.querySelector'getFile'； plusSign.addEventListener'click'，函数{getFile.click；}； getFile.addEventListener'change'，函数{previewgetFile.files[0]；}； 函数预览文件{ const img=document.querySelector'previewimg'； img.classList.addobj； img.file=文件； const reader=新文件读取器； reader.onload=functionimage{返回函数e{image.src=e.target.result；}；}img； reader.readAsDataURLfile； } +

---

只是为了确保我理解正确-您希望这样，当用户单击+符号时，他们会被要求从本地文件存储中选择一个图像。这样的选择会发生什么事情吗？谢谢，但这不起作用：谢谢，这是有效的，但这不是图片的预览：我不能通过VS代码运行此代码。我猜常量没有被检测到。原因是什么？我把它放进去了。我想知道我是否把它放错地方了。你能解释一下你的环境是什么吗？因为我不知道如何通过VS代码运行。也许在你的问题中加入一个适当的片段，并提供相关信息会有所帮助？另外，您在开发工具控制台中看到了哪些错误？它实际上没有给出任何错误。你提供的代码可以使用，但当它在DreamWeaver和VS代码上处理时，它在任何浏览器浏览器浏览器浏览器Opera Chrome上都不起作用。我猜Const没有运行该键，我想知道我是否把它放错了位置，如果你愿意，我可以通过电子邮件将所有代码和图片发送给你@AHaworth感谢您所做的一切您是否将div、img和input id正确地重命名为您在代码中使用的任何内容？您需要Javascript位于HTML之后，否则它无法找到元素。

<div id="imgbox">
      <label for="file"><img src="./images/Button.png" alt="" /></label>
      <input type="file" name="file" id="file" style="display: none;"/>
</div>

<div id="imgbox"> <img id="imgsrch" name="imgsrch" src="images/Button.png" width="120px" 
onClick="imageReflesh(imgsrch)"></div>

<input style="display: none" id="myInputForm" type="file">

<script language="javascript">
function imageReflesh(imgsrch){document.getElementById("myInputForm").click();}
</script>