Breaking News: Grepper is joining You.com. Read the official announcement!

Load auto Mulit Images with javaScript

Zabir Emu answered on December 25, 2022 Popularity 1/10 Helpfulness 1/10

answer Load auto Mulit Images with javaScript

Load auto Mulit Images with javaScript

Comment

// Load auto Mulit Images with javaScript 
// first load jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
// 2nd give input feild id
<label for="gallery_image">Gallery Image</label>
      <input class="form-control" type="file" name="gallery_image[]" multiple
       id="multiImage">
       // take div
	   <div class="row mt-3" id="preview_img"></div>
// script file code
<script>
            $(document).ready(function() {
                $('#multiImage').on('change', function() { //on file input change
                    if (window.File && window.FileReader && window.FileList && window
                        .Blob) //check File API supported browser
                    {
                        var data = $(this)[0].files; //this file data

                        $.each(data, function(index, file) { //loop though each file
                            if (/(\.|\/)(gif|jpe?g|png|webp)$/i.test(file
                                    .type)) { //check supported file type
                                var fRead = new FileReader(); //new filereader
                                fRead.onload = (function(file) { //trigger function on successful read
                                    return function(e) {
                                        var img = $('<img/>').addClass('thumb').attr('src',
                                                e.target.result).width(100)
                                            .height(80); //create image element 
                                        $('#preview_img').append(
                                            img); //append image to output element
                                    };
                                })(file);
                                fRead.readAsDataURL(file); //URL representing the file's data.
                            }
                        });

                    } else {
                        alert("Your browser doesn't support File API!"); //if File API is absent
                    }
                });
            });
        </script>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: auto javascript load

Link to this answer
Share Copy Link

Contributed on Dec 25 2022

Zabir Emu

0 Answers Avg Quality 2/10

Load auto Mulit Images with javaScript

Contents

More Related Answers

Load auto Mulit Images with javaScript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.