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

how to show multi image when type input field in jquery

Add Answer

Zabir Emu answered on January 25, 2023 Popularity 3/10 Helpfulness 1/10

answer how to show multi image when type input field in jquery

related jquery display images selected with input multiple

how to show multi image when type input field in jquery

Comment

Multiple image show with jQuery

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

                reader.readAsDataURL(input.files[i]);
            }
        }

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

// html file
<div class="col-md-12 mb-3">
      <label for="gallery_image" class="form-label">Gallery<span style="color: red;">*</span></label>
      <input type="file" class="form-control" name="gallery_image[]" id="gallery-photo-add" rows="3" multiple="">
</div>
<div class="gallery"></div>

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: image input-field javascript jquery show when

Link to this answer
Share Copy Link

Contributed on Mar 09 2023

Zabir Emu

0 Answers Avg Quality 2/10

Closely Related Answers

jquery display images selected with input multiple

Comment

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script>
$(document).ready(function() 
{ 
 $('form').ajaxForm(function() 
 {
  alert("Uploaded SuccessFully");
 }); 
});

function preview_image() 
{
 var total_file=document.getElementById("upload_file").files.length;
 for(var i=0;i<total_file;i++)
 {
  $('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'><br>");
 }
}
</script>
</head>
<body>
<div id="wrapper">
 <form action="upload_file.php" method="post" enctype="multipart/form-data">
  <input type="file" id="upload_file" name="upload_file[]" onchange="preview_image();" multiple/>
  <input type="submit" name='submit_image' value="Upload Image"/>
 </form>
 <div id="image_preview"></div>
</div>
</body>
</html>

http://talkerscode.com/webtricks/upload-multiple-images-with-image-preview-using-jquery-ajax-php.php

Popularity 3/10 Helpfulness 1/10 Language html

Source: Grepper

Tags: input html selected display jquery

Link to this answer
Share Copy Link

Contributed on Jan 25 2023

Homelander

0 Answers Avg Quality 2/10

how to show multi image when type input field in jquery

Contents

More Related Answers

how to show multi image when type input field in jquery

Closely Related Answers

jquery display images selected with input multiple

Grepper

Documentation

Social

Legal

Contact

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