How to display image after upload in JavaScript?

First make a folder named, “upload-image”. Under “upload-image”, create another folder for the image, named “image” where my image will show after upload.

Table of Contents Show

How to preview image after upload in JavaScript?
How to display selected image in JavaScript?
How to view uploaded file in JavaScript?
How to display images one by one using JavaScript?

Folder Structure

Step 2

1. Create a file named, “index.php” and save under “upload-image”.
2. Before <body> tag, type this script:

<script>
function uploadpic(pic){
document.getElementById("image").setAttribute('src',pic);
}
</script>

3. Next, under <body> tag, write down the following code:

<form id="form" method="post" action="upload.php" enctype="multipart/form-data" target="iframe">
<input type="file" id="file" name="file"><br><br>
<input type="submit" id="submit" name="submit" value="Submit"><br>
</form>
<p id="message">Message will show here</p>
<img id="image" name="image" style="min-height:120;min-width:200;max-height:120px;”>
<iframe id="iframe" style="display:none;" name="iframe"></iframe>

Step 3

1. Now, create a new file named, “upload.php” and save under “upload-image”.
2. Here, write down the following script:

<?php
if($_FILES['file']['size']>0){
if($_FILES['file']['size']<=183400)
{
if(move_uploaded_file($_FILES['file']['tmp_name'],'img/'.$_FILES['file']['name']))
{
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML="";
parent.document.getElementById("file").value="";
window.parent.uploadpic("<?php echo 'img/'.$_FILES['file']['name'];?>")
</script>
<?php
}
else
{
?>
<script type="text/javascript">
parent.document.getElementById("message").innerHTML='<font color="#dedeff">file upload error</font>';
</script>
<?php
}
}
else
{
?>
<script type="text/javascript">alert('$file size is too big');
parent.document.getElementById("message").innerHTML='<font color="#dedeff">file size is too big</font>';
</script>
<?php
}
}
?>

Now, run the file. Before running the file, make sure the local server is running otherwise, we’ll not able to show the PHP page. After successfully uploading the image, go to “image” folder, here we see the uploaded image.

*** For Linux users,

After following all the steps, if the image can’t display in the page, then go to the Terminal and take permission for the folder.

To preview an image before and after upload, you need to try the following code − HTML

The following is the jQuery −

function display(input) {
   if (input.files && input.files[0]) {
      var reader = new FileReader();
      reader.onload = function(event) {
         $('#myid').attr('src', event.target.result);
      }
      reader.readAsDataURL(input.files[0]);
   }
}

$("#demo").change(function() {
   display(this);
});

In this article, I will give you a step-by-step walkthrough for selecting an image from the client machine and displaying the preview of the selected image inside an HTML element. All of these will happen with the help of HTML, JavaScript, and CSS (for designing the element where the preview will be shown).

3 Steps To Preview an Image

Create a Basic Layout for the Image Preview Using HTML.
Design the Image Preview Section Using CSS.
Display the Preview of the Image Using JavaScript.

Step 1: Create a Basic Layout for the Image Preview Using HTML

Add a div element with a class named image-preview-container. Inside it, add another div element with a class named preview. This element will contain an img tag with an ID named preview-selected-image. This will be used to show the preview of the selected image. Next, add a label and input of type file to select an image from the file system. The label element will act as a button with the help of CSS. When it is clicked, a pop-up box will open to browse the file system for images. When you select an image, and press the OK button, a function named previewImage() will be called that will capture the selected image.

Add the following code snippet to the file where you want to display the image preview and save it.

Step 2: Design the Image Preview Section Using CSS

Now, we need to design the section where the preview of the image will be shown. Add the following code snippet to a style element on the page or to an external CSS file and save it.

Step 3: Display the Preview of the Image Using JavaScript

Now, we need to create an arrow function that will capture the selected image and display the preview of it. Refer to the following code snippet to understand how to show the image preview using JavaScript.

Outcome

Kudos! You have completed learning how to preview an image using JavaScript in 3 easy steps.

If you enjoyed reading this post and have found it useful for you, then please give a clap, share it with your friends, and follow me to get updates on my upcoming posts. You can connect with me on LinkedIn.

How to preview image after upload in JavaScript?

Display the Preview of the Image Using JavaScript..

Step 1: Create a Basic Layout for the Image Preview Using HTML. Add a div element with a class named image-preview-container . ... .

Step 2: Design the Image Preview Section Using CSS. ... .

Step 3: Display the Preview of the Image Using JavaScript..

How to display selected image in JavaScript?

We have to display image after selecting file in input(type='file') using JavaScript. We can preview input file(image) with following 'readURL' user defined JavaScript function. The Preview action executed when input 'onchange' event trigged.

How to view uploaded file in JavaScript?

Use the select file HTML to initialize an input form that records the file name. Next, get a reference of your input file by passing in its id. Now, add an event listener to detect the chosen file. In the line after, we can call the readAsText() method on the first file in the list.

How to display images one by one using JavaScript?

onclick = function(){ if(position < myArray. length){ result = result + "<img src='" + myArray[position + 1] + "'/>"; displayList. innerHTML = result; position++; } }; The idea is to use a variable to memorize your position within your list of image srouces.