用于从计算机上传照片的图像按钮答案

【问题标题】：Image button used to upload photo from computer用于从计算机上传照片的图像按钮
【发布时间】：2018-01-06 17:44:10
【问题描述】：

我有一个用 html 创建的表。在表格的第一个单元格 (1,1) 中，我添加了一张图片。我希望此图像用作按钮。当我按下图像时，我希望能够从计算机中选择一张照片并将其添加到表格的下一个空闲单元格中，如果还有空闲单元格的话。我对 HTML、CSS 和 JavaScript 完全陌生，我真的在这里搜索过答案，但没有一个对我有帮助。

还有更多。我知道要使用外部 javascript 文件，我需要将其添加到 html 的头部或正文中：<script src="nameofjs"></script>。我的问题是：在 javascript 文件中，我编写了我的 html 代码所需的所有函数和变量，没有那个标签？而且我只用html调用我需要的那个，对吧？

所以我想知道：

如何使该图像像按钮一样工作
如何使用该图片按钮从计算机上传图片
如何让图片上传到下一个免费单元格
我需要在现有代码的何处添加新代码。

这是表格的代码：

<table class="imagestable">
              <tr class="firstrow">
                <td class="imagebox"><img class="tableimage" src="C:\Users\AncaAlexandra\Desktop\Proiect multimedia\addimageicon.png"></td>
                <td class="imagebox">
                </td> 
                <td class="imagebox"></td>
                <td class="imagebox"></td>
              </tr>
              <tr class="secondrow">
                <td class="imagebox"></td>
                <td class="imagebox"></td> 
                <td class="imagebox"></td>
                <td class="imagebox"></td>
              </tr>
              <tr class="thirdrow">
                <td class="imagebox"></td>
                <td class="imagebox"></td> 
                <td class="imagebox"></td>
                <td class="imagebox"></td>
              </tr>
               <tr class="fourthrow">
                <td class="imagebox"></td>
                <td class="imagebox"></td> 
                <td class="imagebox"></td>
                <td class="imagebox"></td>
              </tr>
            </table>

非常感谢。这是到目前为止的外观截图

【问题讨论】：

努力后请一次问1个问题。

标签： javascript jquery html css image

【解决方案1】：

如何使该图像像按钮一样工作：

不要使用 img-tag 使用这个：

<label for="pickFile">
   <img src="C:\Users\AncaAlexandra\Desktop\Proiectmultimedia\addimageicon.png"/>
</label>
<input id="pickFile" type="file"/>

这只会为文件创建一个<input> 字段，不幸的是它们很难处理。这就是我们创建标签的原因（用于 id=pickFile 的输入）。我们在其中放置了您的小图标。

使用 CSS，您可以修改标签的样式。将 CSS 放在文件的 <head> 内的 <style>...</style> 标记内。

<style>
   #pickFile {
       display: none;
   }
</style>

欲了解更多信息，请参阅Styling an input type="file" button

如何使用该图片按钮从计算机上传图片

如果你真的想上传图片，你必须设置一个 php-web 服务器。取而代之的是，您可以使用 JavaScript 将图像插入表中。但这是一个完全不同的话题看到这个问题：Preview an image before it is uploaded

【讨论】：