css hide "Dosya Seç" butonu, ancak dosyayı seçtikten sonra görüntüleyiniz

Question

Görüntü yükleme için özel butonlar yapmak istiyorum.

https://jsfiddle.net/algometrix/fgrbyo4z/

Ama NASIL sonra seçilen dosya adını gösterebilir: Aşağıda demo ile bu sonucu almak mümkün? Ya da mümkünse bir görüntünün küçük resmi bile olabilir mi? Açılan pencereden bir dosya seçtikten sonra, onu seçtikten sonra sayfada 'dosya adını' görüntülemek istiyorum.

Javascript - jQuery bu alanda herhangi bir kişi yardımcı olabilirse tamamen bir seçenektir.

HTML javascript eklenmesiyle

<div> 
    <div style="display:block;text-align:center;margin-top:20%;"> 
    <label for="files"> <span class="btn">Select Image</span></label> 
    <input style="visibility: hidden; position: absolute;" id="files" class="form-control" type="file" name="files"> 

    </div> 

</div> 

CSS

.btn { 
    font-family: Arial; 
    color: #ffffff; 
    font-size: 20px; 
    background: #3f88b8; 
    padding: 10px 20px 10px 20px; 
    text-decoration: none; 
} 

.btn:hover { 
    background: #3cb0fd; 
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db); 
    background-image: linear-gradient(to bottom, #3cb0fd, #3498db); 
    text-decoration: none; 
} 

Answer 1

, biz sadece girişi change olayı izlemek ve sayfadaki adı koyabilirsiniz. Bu küçük HTML değişiklikleri unutmayın:

<div class="file-upload"> 
    <label for="upload-1" class="btn">Upload</label> 
    <input type="file" id="upload-1"> 
    <p class="file-name">Please select a file.</p> 
</div> 

bu jQuery ile:

jQuery(function($) { 
    $('input[type="file"]').change(function() { 
    if ($(this).val()) { 
     var filename = $(this).val(); 
     $(this).closest('.file-upload').find('.file-name').html(filename); 
    } 
    }); 
}); 

Working Fiddle

Answer 2

Bu komut dosyası en kısa sürede yüklenen olarak resim görülmektedir:

function readURL(input) { 

    if (input.files && input.files[0]) { 
     var reader = new FileReader(); 

     reader.onload = function (e) { 
      $('#img').show().attr('src', e.target.result); 
     } 

     reader.readAsDataURL(input.files[0]); 
    } 
} 

$("#files").change(function(){ 
    readURL(this); 
}); 

Source

Updated Fiddle

Answer 3

Sadece dosya elemanının değişim olayı içine dokunun:

var file = document.getElementById("files"); 
file.addEventListener("change", function(){ alert(this.value); }); 

bu keman göstergeler: https://jsfiddle.net/pbg44bqu/12/