Image priview

by Ratan Paul

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">    
<form id="form1" runat="server">
        <span class="btn btn-primary  btn-file">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>Add files...</span>
                    <input type='file' id="imgInp" multiple/>
       </span>
    </form>

CSS

.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

JavaScript

function readURL(input) {
        for(var i =0; i< input.files.length; i++){
        if (input.files[i]) {
            var reader = new FileReader();
            
            reader.onload = function (e) {
               var img = $('<img id="dynamic">'); //Equivalent:          $(document.createElement('img'))
img.attr('src', e.target.result);
img.appendTo('#form1');  
                //$('#blah').attr('src', e.target.result);
            }
            
            reader.readAsDataURL(input.files[i]);
        }
        }
        
    }
    
    $("#imgInp").change(function(){
        readURL(this);
    });