सीएसएस छिपाने के बाद चयन

Question

बटन लेकिन प्रदर्शन फ़ाइल "फ़ाइल चुनें" मैं एक छवि अपलोड करने के लिए कस्टम बटन बनाने के लिए करना चाहते हैं। मैं नीचे डेमो के साथ इस परिणाम प्राप्त करने में सक्षम हूँ:

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

लेकिन कैसे मैं के बाद चयनित फ़ाइल नाम प्रदर्शित कर सकते हैं? या यदि संभव हो तो एक छवि का एक थंबनेल भी हो सकता है? जैसे ही मैं खुले पॉप की खिड़की से एक फाइल चुनता हूं, मैं इसे चुनने के बाद पेज पर 'फ़ाइल नाम' प्रदर्शित करना चाहता हूं।

जावास्क्रिप्ट - jQuery पूरी तरह से एक विकल्प है यहां अगर कोई उस क्षेत्र में मदद कर सकते हैं।

एचटीएमएल

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

सीएसएस

.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

जावास्क्रिप्ट के अलावा के साथ, हम बस इनपुट पर change घटना के लिए देखते हैं, और पृष्ठ पर मौजूद नाम डाल सकते हैं। कृपया ध्यान दें ये नाबालिग एचटीएमएल परिवर्तन:

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

इस jQuery के साथ:

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

यह स्क्रिप्ट जैसे ही अपलोड की गई के रूप में छवि दिखाता है:

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

बस फ़ाइल तत्व के परिवर्तन घटना का दोहन:

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

इस बेला में दिखाया गया: https://jsfiddle.net/pbg44bqu/12/