एचटीएमएल

Question

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

http://goawaymom.com/buttons.png

मेरी एचटीएमएल -

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
    <input name="file" type="file"class="box"/>   
    <input type="submit" id="mybut" value="Upload" name="Submit"/> 
</form> 

-Note मैं अलग-अलग पंक्तियों पर डाल या बनाने के फॉन्ट smaller- आदि

Answer 1

सबसे आसान तरीका:

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
     <input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>   
     <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/> 
    </form>  

Jquery के बिना, केवल जावास्क्रिप्ट

<form method="post" action="" enctype="multipart/form-data" name="form1"> 
     <input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>   
     <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/> 
    </form> 

Answer 2

<script type="text/javascript"> 
$(function() { 
$("input:file").change(function(){ 
    var fileName = $(this).val(); 
    if(fileName){ 
     remove chose file button and show upload button(visible property) 
    } 

}); 
}); 

जांच करने के लिए परवाह नहीं है jQuery - Detecting if a file has been selected in the file input

Answer 3

हाँ, यह वास्तव में बहुत आसान है। आप फ़ाइल इनपुट के onchange ईवेंट को सुन सकते हैं और इसे छुपा सकते हैं।

HTML:

<input name="inpt" type="file"/> 
<input type="button" value="Upload"/> 

जावास्क्रिप्ट:

//this event is fired when the file is chosen (not when user presses the cancel button) 
inpt.onchange = function(e) { 
    //setting display to "none" hides an element 
    inpt.style.display="none"; 
}; 

JSfiddle

पी एस। यदि आप चाहते हैं कि आप एक ही चाल का उपयोग केवल "अपलोड" बटन दिखाने के लिए कर सकते हैं जब फ़ाइल चुनी जाती है। उस स्थिति में बटन कोड <input id="btn" type="button" value="Upload" style="display:none"/> होगा और जावास्क्रिप्ट कोड में आप बटन दिखाने के लिए btn.style.display="" लिखेंगे।

Answer 4

मैं कह सकता हूं कि ऐसा करने के कई तरीके हैं। लेकिन कोर जावा स्क्रिप्ट में नीचे दृष्टिकोण है

(1) शुरू में किसी से अपलोड बटन के प्रदर्शन शैली सेट आदेश को छिपाने के लिए है कि

(2) लिखें इनपुट फ़ाइल प्रकार के लिए onchange ईवेंट हैंडलर में

(3) उस हैंडलर फ़ंक्शन में यदि मान शून्य नहीं है तो प्रदर्शन शैली को लागू करके इनपुट फ़ाइल को छुपाएं और फिर खाली बटन ('') पर अपलोड बटन की शैली बदलें।

आशा इस दृष्टिकोण से काम करता है