image preview after upload

-

HTML CODING PART 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="style.css">

   

</head>

<body>

    <!--  source link: https://levelup.gitconnected.com/preview-an-image-before-uploading-using-javascript-953557f54154 -->

    <h1>Preview an Image Before Uploading Using JavaScript</h1>

<div class="image-preview-container">

    <div class="preview">

        <img id="preview-selected-image" />

    </div>

    <label for="file-upload">Upload Image</label>

    <input type="file" id="file-upload" accept="image/*" onchange="previewImage(event);" />

</div>

</body>

<script src="script.js"></script>

</html>


CSS CODNG PART

h1 {

    margin: 0 auto;

    margin-top: 5rem;

    margin-bottom: 2rem;

    text-align: center;

}


.image-preview-container {

    width: 50%;

    margin: 0 auto;

    border: 1px solid rgba(0, 0, 0, 0.1);

    padding: 3rem;

    border-radius: 20px;

}


.image-preview-container img {

    width: 100%;

    display: none;

    margin-bottom: 30px;

}

.image-preview-container input {

    display: none;

}


.image-preview-container label {

    display: block;

    width: 45%;

    height: 45px;

    margin-left: 25%;

    text-align: center;

    background: #8338ec;

    color: #fff;

    font-size: 15px;

    text-transform: Uppercase;

    font-weight: 400;

    border-radius: 5px;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


JS CODING PART


const previewImage = (event) => {


    const imageFiles = event.target.files;

   

    const imageFilesLength = imageFiles.length;

   

    if (imageFilesLength > 0) {

      

        const imageSrc = URL.createObjectURL(imageFiles[0]);

      

        const imagePreviewElement = document.querySelector("#preview-selected-image");

     

        imagePreviewElement.src = imageSrc;

      

        imagePreviewElement.style.display = "block";

    }

};


------------------------------------------------------------------------------------------------------------------------

mutiple image via bootstrap and laravel


blade file ---


<div class="col-4">

  <div class="image-preview-container">

    <div class="preview">

        <img id="preview-selected-image2" />

    </div>

    <label for="file-upload2">2</label>

    <input type="file" name="file-upload2" id="file-upload2" accept="image/*" onchange="previewImage2(event);" />

</div>

  </div>




<div class="col-4">

  <div class="image-preview-container">

    <div class="preview">

        <img id="preview-selected-image3" />

    </div>

    <label for="file-upload3">3</label>

    <input type="file" name="file-upload3" id="file-upload3" accept="image/*" onchange="previewImage3(event);" />

</div>

  </div>


  <div class="col-4">

  <div class="image-preview-container">

    <div class="preview">

        <img id="preview-selected-image4" />

    </div>

    <label for="file-upload4">4</label>

    <input type="file" name="file-upload4" id="file-upload4" accept="image/*" onchange="previewImage4(event);" />

</div>

  </div> 


JS part --- 

const previewImage2 = (event) => {

 

    const imageFiles = event.target.files;


    const imageFilesLength = imageFiles.length;

 

    if (imageFilesLength > 0) {

     

        const imageSrc = URL.createObjectURL(imageFiles[0]);

      

        const imagePreviewElement = document.querySelector("#preview-selected-image2");

      

        imagePreviewElement.src = imageSrc;

     

        imagePreviewElement.style.display = "block";

    }

};


const previewImage3 = (event) => {

 

 const imageFiles = event.target.files;


 const imageFilesLength = imageFiles.length;


 if (imageFilesLength > 0) {

  

     const imageSrc = URL.createObjectURL(imageFiles[0]);

   

     const imagePreviewElement = document.querySelector("#preview-selected-image3");

   

     imagePreviewElement.src = imageSrc;

  

     imagePreviewElement.style.display = "block";

 }

};


const previewImage4 = (event) => {

 

 const imageFiles = event.target.files;


 const imageFilesLength = imageFiles.length;


 if (imageFilesLength > 0) {

  

     const imageSrc = URL.createObjectURL(imageFiles[0]);

   

     const imagePreviewElement = document.querySelector("#preview-selected-image4");

   

     imagePreviewElement.src = imageSrc;

  

     imagePreviewElement.style.display = "block";

 }

};



Popular posts from this blog

MCSL 216 MCA NEW Practical ~ common questions suggestions

-
Topic: JS VALIDATION   Q1. Design a form for booking room through a Hotel website. The form should have relevant fields (make suitable assumptions). Further, the form should have Submit and Reset button. Now, perform following: Marks: 20   Solution: <html>     <title>hotel form booking</title>     <body>         <br>         <h2>Hotel Form</h2>         <br>           <form id="booking_form">             <label for="p_name">Person Name</label> <br>             <input type="text" id="p_name" name="p_name">          ...
Read more

dev chaeatsheet

-
Image
dev cheatsheet link: https://docs.google.com/document/d/15gRGAB57iEFs_TGsqrk08_OZ36mX1yfsMKCYM6qX7gk/edit?usp=sharing Topic: WordPress Theme Dev We can develop our custom theme in wordpress. Let’s first understand the folder structure of wordpress.contact form Let me assure you, how can you make a proper structure of a wordpress project.  front-page.php: This template is used to display the front page of the site. It's often used for the site's homepage. index.php: This is the fallback template used when more specific templates are not available. It usually displays a list of posts. style.css: This file contains the styles for your theme. While it can include theme author details in comments, its primary purpose is to style the HTML elements of your theme. single.php: This template is used to display a single post's details.             404.php: handle 404 error page         ...
Read more

STRAPI

-
Image
  Strapi helps us to provide pre-made cms backend. In strapi everything is about content type.   Topic: Weird Things About STRAPI Topic: Document Save States When we want to store a post into strapi, that time it gives us 2 options: “publish”, “save”. When we create content as publish/save it creates 2 different records. First 2 are for “save” and the rest 2 are for “publish”. Good thing is when creating a new publish/save it delta the OLD one ID and create a NEW one. Topic: Content Type change in strapi We can add multiple fields into strapi content type. For changing the Column Type we need go in inside /src/your-content-type/schema.json /* OLD ONE */ "attributes": {     "title": {       "type": "string"     },     "description": {       "type": "text",   "length": 80     }, /* NEW ONE */ "description": {    ...
Read more