Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP

Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP

In this Post We Will Explain About is Display Image Preview Before Upload Multiple Images using jQuery,Ajax And PHP With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Upload Multiple Images With Image Preview Using jQuery,Ajax And PHPExample

In this post we will show you Best way to implement javascript – Preview an image before it is uploaded, hear for Display preview selected image in input type file using JQuerywith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Generally, live24u share one simple helpfull post about new jquery and bootstrap. in this post I Am show I how to show HTML image preview before upload.

I Am need some time this type functionality in frontend site which I want to show image preview before it upload in server. resently I Am working on one laravel application and I Am need this so I Am make one simple script for it using jquery and bootstrap. and I Am finaly done this with jquery and bootstrap.

Also Read :  Upload Multiple Images With Image Preview Using jQuery,Ajax And PHP

Here, I Am always share our source code and example which I Am facing in our devloping mode and when I Am find finaly simple solution about it the I Am also share with I.

You can try this simple example with bootstrap because I Am using bootstrap for fine good code.

Phase : 1 HTML code look like

<!DOCTYPE html>
<html>
<head>
	<title>Pakainfo.com Show Image Preview Before Upload</title>
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<script src="jquery.min.js"></script>
	<script src="bootstrap.min.js"></script>
</head>
<body>
	<div class="container">
	    <div class="row">    
	        <div class="col-xs-12 col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">  
	            <div class="input-group live-img-prev">
	                <span class="input-group-btn">
	                    <button type="button" class="btn btn-primary live-img-prev-clear" style="display:none;">
	                        <span class="glyphicon glyphicon-remove"></span> Clear
	                    </button>
	                    <div class="btn btn-primary live-img-prev-input">
	                        <span class="glyphicon glyphicon-folder-open"></span>
	                        <span class="live-img-prev-input-title">Browse</span>
	                        <input type="file" accept="image/png, image/jpeg, image/gif" name="input-file-preview"/>
	                    </div>
	                </span>
	            </div>
	        </div>
	    </div>
	</div>
	
	<p>We are Web Technology Experts and Team who provide you very Important information on Web Development information,Examples and Demo, Interview Questions and Answers, live project problem solution and their solution and online free tutorials – “Pakainfo.com”.
	</p>
</body>
</html>

Phase : 2 CSS code look like

Then add simple some css code following copy following source code as well as add in wer simple css file.

Also Read :  javascript calculate Intersection of multiple arrays

.live-img-prev-input {
    position: relative;
	overflow: hidden;
	margin: 0px;    
    color: #333;
    background-color: #fff;
    border-color: #ccc;    
}
.live-img-prev-input input[type=file] {
	top: 0;
	right: 0;
	cursor: pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	margin: 0;
	padding: 0;
	position: absolute;
	font-size: 20px;

}
.live-img-prev-input-title {
    margin-left:2px;
}	

Phase : 3 jQuery code look like

The finaly simple put following source jQuery code in js file.

$(document).on('click', '#close-preview', function(){ 
    $('.live-img-prev').popover('hide');
    // Hover befor close the preview
    $('.live-img-prev').hover(
        function () {
           $('.live-img-prev').popover('show');
        }, 
         function () {
           $('.live-img-prev').popover('hide');
        }
    );    
});

$(function() {
    // Pakainfo.com Create the close button
    var closebtn = $('<button/>', {
        type:"button",
        text: 'x',
        id: 'close-preview',
        style: 'font-size: initial;',
    });
    closebtn.attr("class","close pull-right");
    // Pakainfo.com Set the popover primary content
    $('.live-img-prev').popover({
        trigger:'manual',
        html:true,
        title: "<strong>Preview</strong>"+$(closebtn)[0].outerHTML,
        content: "There's no image",
        placement:'bottom'
    });
    //Pakainfo.com Clear event
    $('.live-img-prev-clear').click(function(){
        $('.live-img-prev').attr("data-content","").popover('hide');
        $('.live-img-prev-filename').val("");
        $('.live-img-prev-clear').hide();
        $('.live-img-prev-input input:file').val("");
        $(".live-img-prev-input-title").text("Browse"); 
    }); 
    //Pakainfo.com Create the preview image
    $(".live-img-prev-input input:file").change(function (){     
        var img = $('<img/>', {
            id: 'dynamic',
            width:250,
            height:200
        });      
        var file = this.files[0];
        var photo_red = new FileReader();
        // here Set preview image into the popover data-content
        photo_red.onload = function (e) {
            $(".live-img-prev-input-title").text("Change");
            $(".live-img-prev-clear").show();
            $(".live-img-prev-filename").val(file.name);            
            img.attr('src', e.target.result);
            $(".live-img-prev").attr("data-content",$(img)[0].outerHTML).popover("show");
        }        
        photo_red.readAsDataURL(file);
    });  
});

Last step to I Am ready to run our simple example so run simple bellow command ro quick run:

Also Read :  Dynamically Upload Multiple Images Using PHP and jQuery

Example

I hope you have Got What is Image Upload Preview Plugin With jQuery And Bootstrap And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *