css ẩn nút "Chọn tệp" nhưng hiển thị tệp sau khi chọn

Question

Tôi muốn thực hiện nút tùy chỉnh cho tải lên hình ảnh. Tôi có thể có được kết quả này với bản demo dưới đây:

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

Nhưng TÔI CÓ THỂ DISPLAY tên tập tin được lựa chọn sau? Hoặc thậm chí có thể là hình thu nhỏ của hình ảnh nếu có thể? Giống như sau khi tôi chọn một tập tin từ cửa sổ bật mở, tôi muốn nó hiển thị 'tên tập tin' trên trang sau khi tôi chọn nó.

Javascript - jQuery hoàn toàn là một tùy chọn ở đây nếu có ai đó có thể trợ giúp trong khu vực đó.

HTML

<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

Với việc bổ sung javascript, chúng tôi chỉ có thể xem cho sự kiện change vào đầu vào, và đặt tên trên trang. Xin lưu ý những thay đổi HTML nhỏ:

<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> 

Với jQuery này:

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

kịch bản này cho thấy hình ảnh càng sớm càng tải lên:

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

Chỉ cần gõ vào sự kiện thay đổi của các yếu tố file:

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

Thể hiện trong fiddle này: https://jsfiddle.net/pbg44bqu/12/