Image button used to upload photo from computer

Question

I have a table created in html. In the first cell of the table, (1,1), I have added an image. I want this image to function as a button. When I press the image I want to be able to select a photo from computer and add it on the next free cell of the table, if there are free cells left. I am totally new to HTML, CSS and JavaScript and I really searched here for answers, but none of them helped me.

Something more. I understand that to use an external javascript file, i need to add this in the head or body of html: <script src="nameofjs"></script>. My question is: in the javascript file, i write all the functions and variables i need for my html code, without that tag? And I only call the one I need in html, right?

So I want to know:

How to make that image work like a button
How to use that image button to upload image from computer
How to make the image be uploaded in the next free cell
Where in the existent code I need to add the new code.

And this is the code of the table:

<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>

Thank you very much. Here is a screenshot of how this looks until now

Please ask 1 question at a time after showing some effort. – mplungjan Jan 06 '18 at 20:45 — mplungjan, Jan 06 '18 at 20:45

score 0 · Answer 1 · edited Jan 07 '18 at 21:22

How to make that image work like a button:

Instead of using the img-tag use this:

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

This creates a <input> field only for files, unfortunately they are difficult to handle. Thats why we create a lable (for the input with the id=pickFile). In this we put your little icon.

See more: https://www.w3schools.com/tags/att_input_type.asp

With CSS you can modify the style of the lable. Put the CSS inside a <style>...</style> tag inside the <head> of your file.

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

For further informations see Styling an input type="file" button

How to use that image button to upload image from computer

If you really want to upload an image you'll have to set up a php-web server. Instead of that you could use JavaScript to insert your image into the table. But this is a completely other topic See this Question: Preview an image before it is uploaded

Image button used to upload photo from computer

1 Answers1