There is a script and it works. I can’t do several previews at once, now only one opens:

function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#image').attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } $("#photo").change(function() { readURL(this); }); 
 .upload-file-container { position: relative; width: 94px; height: 94px; display: block; margin: 0 0 40px 0; overflow: hidden; background: url(https://pp.vk.me/c836621/v836621361/1b0f6/8SaDfr8iMGo.jpg) top center no-repeat; float: left; margin-left: 23px; } .upload-file-container:first-child { margin-left: 0; } .upload-file-container > img { width: 93px; height: 93px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } .upload-file-container-text { font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .file_upload { position: absolute; overflow: hidden; background: #eee; border: 1px solid #ccc; font-size: 30px; line-height: 1; text-align: center; /* padding: 20px; */ width: 95px; top: 96px; } .file_upload input[type=file] { position: absolute; top: 0; right: 0; font-size: 200px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <fieldset> <div class="input-file-row-1"> <div class="upload-file-container"> <img id="image" src="#" alt="" /> <div class="upload-file-container-text"> </div> </div> <div class="file_upload">+ <input type="file" name="photo[]" multiple="true" class="photo" id="photo" /> </div> <div id="delete">delete</div> </div> </fieldset>

    1 answer 1

    Everything just opened the wonderful documentation Flle Reader js replace and html

     function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new FileReader(); reader.addEventListener("load", function () { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild( image ); }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="browse" type="file" onchange="previewFiles()" multiple> <div id="preview"></div>