मैं छवि बटन

Question

पर क्लिक करके एक नई फ़ाइल कैसे अपलोड कर सकता हूं मुझे छवि बटन के क्लिक से नई फ़ाइल अपलोड करने का कार्य मिला है। मेरे कोड

<label>File</lable> 
    <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/> 

इस बटन को मैं एक नया file.How मैं यह कर सकता अपलोड करना चाहते हैं पर क्लिक करने पर है? आप से Demo

Answer 1

मेरी कोड की जांच कर सकते तुम, एक छिपा फ़ाइल इनपुट क्षेत्र जोड़ सकते हैं जैसे:

<input type="image" src="http://upload.wikimedia.org/wikipedia/commons/c/ca/Button-Lightblue.svg" width="30px"/> 
<input type="file" id="my_file" style="display: none;" /> 

और कार्य करें:

$("input[type='image']").click(function() { 
    $("input[id='my_file']").click(); 
}); 

डेमो :: Updated Fiddle

Answer 2

आप सीएसएस का उपयोग कर ऐसा कर सकते हैं।

कृपया इस ब्लॉग में 4 जवाब की जाँच करें।

How can I customize the browse button?

आप .button वर्ग की पृष्ठभूमि छवि के रूप में अपनी छवि का उपयोग कर सकते हैं।

Answer 3

.....

Answer 4

इस

http://css-tricks.com/ajax-image-uploading/

इसकी AJAX का उपयोग कर पर एक नजर डालें तो आप देख रहे हैं एक क्रॉस ब्राउज़र संगत समाधान के लिए आप plupload (http://www.plupload.com) की जांच करनी चाहिए यह मुझे याद है कि छवि बटन का समर्थन करता है।

Answer 5

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

<form action="upload_file.php" method="post" enctype="multipart/form-data"> 
    <input type="file" name="myfile"/> 
    <input type="submit" class="circle-btn"/> 
<form> 

मैं आप किस भाषा (PHP, ASP.NET, आदि) सर्वर साइड में प्रयोग कर रहे हैं, लेकिन आप एक पेज बनाने की आवश्यकता होगी (XAMPLE के लिए पता नहीं है: यह एक के रूप में हो गया है php के लिए "upload_file.php")। आप आसानी से कैसे इस तरह एक पृष्ठ बनाने के लिए के बारे में गूगल में उदाहरण मिल सकता है सिर्फ कोड pasete कॉपी:

PHP में एक उदाहरण: http://www.w3schools.com/php/php_file_upload.asp

आशा है कि यह मदद करता है :)

Answer 6

DemoUser के जवाब के लिए अनुपूरक, .focus जोड़ने() मेरे लिए काम करता है।

$("input[type='image']").click(function() { 
    $("input[id='my_file']").focus().click(); 
    }); 

Answer 7

जावास्क्रिप्ट की कोई जरूरत सिर्फ <input> डाल नहीं है और <img><label> अंदर सुनिश्चित करें कि आप <input> तो जैसे छिपाने बनाने:

<label for="image"> 
     <input type="file" name="image" id="image" style="display:none;"/> 
     <img src="IMAGE URL"/> 
    </label>