Скачать или смотреть How to Upload File Images with a Button Click in JavaScript

Learn how to create an image upload feature in your web application that only displays images when the user clicks a submit button, using JavaScript and jQuery without any backend processing.
---
This video is based on the question https://stackoverflow.com/q/63318900/ asked by the user 'Jeremy Mark' ( https://stackoverflow.com/u/13966425/ ) and on the answer https://stackoverflow.com/a/63320631/ provided by the user 'Greg' ( https://stackoverflow.com/u/13628163/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to upload file images with button click

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Uploading Images with a Button Click: A Step-by-Step Guide

Creating a user-friendly image gallery allows users to upload images visually. However, a common challenge developers face is controlling when those images appear on the screen. By default, most implementations show thumbnails immediately upon selecting a file. What if you want the images to show up only when the user clicks a submit button? Let’s explore how to implement this functionality using only HTML, CSS, and JavaScript.

The Problem

You want to create an image gallery application where users can upload images, but the thumbnails for those images should only appear after a Submit button is clicked. Your current setup displays the images as soon as they are selected, which is not what you want.

Our Solution

We'll modify your JavaScript code to ensure that the thumbnails are rendered after a button click, instead of upon file selection. Below, we will lay out the steps to make it happen.

Step 1: Use JavaScript on Button Click

Instead of using the change event on the input field, we will execute the image display logic inside the click event of your Submit button. Here’s how you can implement it:

Capture the Submit Button Click: We will bind a click event to the Submit button.

Read the Selected Files: We will read the files selected in the file input fields.

Display Thumbnails: We will populate the thumbnail images only when the Submit button is pressed.

Step 2: Updated Code Snippet

You’ll want to update your JavaScript as shown below:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Clean Up

After doing the above, you can delete the previous $(window).on('load', function() { ... }); section from your script since it's no longer needed.

Additional Code Structure

Here’s a sandboxed version of how your HTML, jQuery, and CSS structure should look:

HTML Structure

[[See Video to Reveal this Text or Code Snippet]]

CSS for Thumbnails

You can give basic styling to ensure that your thumbnails and full images display nicely. Here's a simple CSS snippet:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By following these steps, you create an efficient workflow where users select images, but they only display in your thumbnail gallery upon clicking the submit button. This method improves user experience by explicitly controlling when images are displayed, providing a more deliberate upload process.

With these changes, your image gallery functionality on the front end is now complete! Happy coding!