खुली फ़ाइल संवाद दिखाने के लिए इनपुट बॉक्स पर क्लिक करें, लेकिन फ़ाइल बटन

Question

पर क्लिक न करें मेरे पास एक इनपुट बॉक्स है और मैं चाहता हूं कि उपयोगकर्ता खुले फ़ाइल संवाद को दिखाने के लिए इनपुट बॉक्स पर क्लिक करें और उसी इनपुट बॉक्स में फ़ाइल नाम दिखाएं। लेकिन अगर मैं इनपुट प्रकार = "फ़ाइल" का उपयोग करता हूं, तो यह "फ़ाइल बटन चुनें" दिखाएगा, मैं बटन दिखाने के लिए नहीं चाहता हूं। मैं यह कैसे कर सकता हूं?

एचटीएमएल:

<div class="fileupload"> 
    <input type="file" class="file" name="image" /> 
</div> 

<div class="fileupload"> 
    <input type="file" class="file" name="attachement" /> 
</div> 

http://jsfiddle.net/EctCK/ ** मैं इस वान न, मैं कैसे फ़ाइल बटन का चयन छिपाऊँ?

Answer 1

आप एक स्टाइल बटन या अन्य तत्व पर एक पारदर्शी <input type="file"/> ओवरले कर सकते हैं।

<input type="file" style="opacity:0;"/> 

एक काम डेमो के लिए इस JSFiddle देखें।

Answer 2

वैसे इसके लिए थोड़ा हैक है। आपको पृष्ठ पर फ़ाइल अपलोड नियंत्रण की आवश्यकता है। लेकिन आप इसे छिपा सकते हैं और div/span/बटन जैसे किसी भी अन्य नियंत्रण का उपयोग कर फ़ाइल अपलोड नियंत्रण अनुकरण कर सकते हैं और जैसा चाहें स्टाइल कर सकते हैं। यहां jsfiddle पर एक कामकाजी नमूना है।

HTML:

<div id="dummy" class="dummyDiv"> 
    <span>click to chose file:</span> 
    <span id="fileName" class="yellow"></span> 
</div> 
<div class="wrapper"> 
    <input type="file" id="flupld" /> 
</div> 

जे एस:

$("#dummy").click(function() { 
    $("#flupld").click(); 
}); 

$("#flupld").change(function() { 
    //file input control returns the file path as C:\fakepath\<file name> 
    //on windows, so we remeove it and show only file name. 
    var file=$(this).val().replace(/C:\\fakepath\\/ig,''); 

    $("#fileName").text(file); 
}); 

Answer 3

यह प्रयास करें:

<input type="file" id="upload" style="display:none"> 
    <a href="" onclick="document.getElementById('upload').click(); return false;"> Upload </a> 

कार्य नमूना JSFiddle