jquery display images selected with input multiple

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

answer jquery display images selected with input multiple

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

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: display html input jquery selected

Link to this answer
Share Copy Link

Contributed on Jan 25 2023

Homelander

0 Answers Avg Quality 2/10

Closely Related Answers

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: show image javascript jquery when input-field

Link to this answer
Share Copy Link

Contributed on Mar 09 2023

Zabir Emu

0 Answers Avg Quality 2/10

jquery display images selected with input multiple

Contents

More Related Answers

jquery display images selected with input multiple

Closely Related Answers

how to show multi image when type input field in jquery

Grepper

Documentation

Social

Legal

Contact

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