2011-01-02 15 views
7

मैं कई फाइलें अपलोड करना चाहता हूं, इसलिए मैं jquery के माध्यम से गतिशील रूप से अपलोड फ़ील्ड जोड़ना चाहता हूं। अब मैं इसे कर सकता हूं अगर मेरे पास "कोई अन्य फ़ील्ड जोड़ें" जैसे बटन हैं, और फॉर्म में नया अपलोड जोड़ दें, लेकिन मैं इसे थोड़ा अलग करना चाहता हूं।[jquery] मैं फ़ाइल अपलोड गतिशील रूप से कैसे जोड़ूं?

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

उत्तर

11

input तत्व एक change घटना है कि निकाल दिया जाता है जब प्रपत्र क्षेत्र में परिवर्तन किया है। तो:

$('selector_for_your_form').delegate('input[type=file]', 'change', function() { 
    var form = $(this).closest('form'); 
    form.append(/* ... markup for the new field ... */); 
}); 

delegate का उपयोग करता है यही कारण है, जिसका मतलब है कि आप स्पष्ट रूप से नए तत्व पर घटना हुक करने की जरूरत नहीं है।

Live example(मुझे लगता है अपने मार्कअप में थोड़ा और अधिक दिलचस्प   — और निश्चित रूप से बेहतर दिखने   — से वहाँ से पता चला होगा)

अद्यतन: दुर्भाग्य से, change तुरंत कुछ ब्राउज़रों पर आग नहीं करता है (यह तब तक प्रतीक्षा करता है जब तक उपयोगकर्ता आईई 7 पर फ़ील्ड से फोकस नहीं लेता)। यदि आप ईवेंट को सीधे हुक करते हैं तो jQuery आपके लिए यह अजीबता संभालता है, लेकिन यदि आप delegate का उपयोग नहीं करते हैं। तो यहाँ एक वैकल्पिक है:

$('selector_for_your_form input[type=file]').change(fileChangeHandler); 
function fileChangeHandler() { 
    var form = $(this).closest('form'); 
    $('<input type="file">').change(fileChangeHandler).appendTo(form); 
} 

तो अपने मार्कअप (और मुझे लगता है यह है) बस input खुद से अधिक जटिल है, क्या आप वाकई सही तत्व पर change hooking रहे हैं करने की आवश्यकता होगी। कोई चिंता नहीं, खुशी है कि मदद की:

Live example

+0

धन्यवाद एक बहुत है, मैं पूरी तरह से परिवर्तन के बारे में भूल गया और कलंक घटना के साथ खिलवाड़ किया गया था .... कोई आश्चर्य नहीं कि यह कभी नहीं – Bluemagica

+0

@Blue काम किया। :-) –

0

आप इस तरह कुछ कोशिश कर सकते हैं।

<input type="file" name="file" onChange="if ($(this).val() != '' {addNewfileInput();}"> 
संबंधित मुद्दे