Скачать или смотреть How to Retrieve and Use an Image Source in JavaScript

Learn how to effectively save and manage the image source in JavaScript when allowing users to upload and preview images. Find step-by-step instructions to create a functional remove feature.
---
This video is based on the question https://stackoverflow.com/q/68734317/ asked by the user 'SmukasPlays77' ( https://stackoverflow.com/u/15881497/ ) and on the answer https://stackoverflow.com/a/68734725/ provided by the user 'Barmar' ( https://stackoverflow.com/u/1491895/ ) 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 get src from an image before it is changed to use it later?

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.
---
Introduction: The Challenge of Changing Images

In modern web applications, allowing users to upload images is a common feature. However, managing these images smoothly can be tricky. For instance, think about a scenario where a user uploads a new picture but then decides they don’t like it and wants to revert back to the original image. How can we achieve this functionality while ensuring a seamless user experience? This article will guide you through the process of storing the original image source and providing a solution to revert back to it when needed, all without using jQuery.

Understanding the Solution

1. What We Need

The main goal is to create a function in JavaScript that allows users to:

Upload an image and preview it.

Remove the uploaded image and revert to the original default image.
To achieve this, we need to store the initial image source in a JavaScript property so that it can be accessed later when needed.

2. Capture and Store the Original Image Source

We can use the dataset property of the image element to save the original image source. This allows us to easily retrieve it later when the user decides to remove the newly uploaded image.

3. Implementing the Code

Here's how we can set everything up in your JavaScript code:

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

4. Breaking Down the Code

Setting Up Event Listeners:

The change event on the file input (inpFile) is triggered when a new file is uploaded.

The removeButton triggers the revert function when clicked.

Storing the Original Source:

The line previewImage.dataset.origSrc = previewImage.src; saves the current image source (the original) into a custom dataset property when the user uploads a new image for the first time.

Removing the Uploaded Image:

When the removeButton is clicked, the script checks if the origSrc exists. If it does, it sets the image's source back to the original and clears the stored original source.

Conclusion: A Seamless User Experience

By effectively managing the image source with JavaScript, you can provide users with a smooth experience when uploading and removing images. Storing the original source in a dataset property is a simple yet powerful technique that allows easy access and manipulation of image data. With this guide, you can ensure that your web applications operate seamlessly when dealing with image uploads. Happy coding!