<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h3>Bilder</h3> <hr/> <div class="col-md-3"> <div class="form-group"> <label for="logo-id" class="main-img-preview"> <img class="thumbnail img-preview" src="/res/img/ic_photo_camera.png"/> <div class="input-group" > <div class="input-group-btn"> <div class="fileUpload btn btn-default fake-shadow"> <span><i class=""></i></span> <input id="fileupload" name ="image[]" type="file" accept="image/*" class="attachment_upload" multiple> </div> </div> </div> </label> </div> </div> <div class="col-md-9" id="dvPreview"> </div> </div> </div>

$(document).ready(function () { var inp = $("#inputs"); var brand = document.getElementById('logo-id'); var htmlstring = "<div class=\"form-group col-md-3\" id=\"inputs\"><img class=\"thumbnail img-preview\" src=\"/res/img/ic_photo_camera.png\"/><div class=\"input-group\" ><div class=\"input-group-btn\"><div class=\"fileUpload btn btn-default fake-shadow\"><span><i class=\"\"></i></span><input type=\"file\" name=\"image[]\" class=\"attachment_upload\"></div></div>"; brand.className = 'attachment_upload'; brand.onchange = function () { document.getElementById('fakeUploadLogo').value = this.value.substring(12); }; function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('.img-preview').attr('src', e.target.result); $('.img-preview').attr('height', 150); }; reader.readAsDataURL(input.files[0]); } } $("#logo-id").click(function () { inp.prepend(htmlstring); }); $(".attachment_upload").change(function () { readURL(this); }); });