किसी अन्य रूप में घोंसला वाले अजाक्स अपलोड फॉर्म के लिए वैकल्पिक

Question

मेरे पास मेरे कार्यस्थल पर डेटाबेस सिस्टम में किसी व्यक्ति के विवरण को संपादित करने के लिए एक HTML फ़ॉर्म है। फॉर्म का हिस्सा उपयोगकर्ता को व्यक्ति की तस्वीर अपलोड करने की अनुमति देता है। हालांकि, यह मुझे परेशानी दे रहा है, क्योंकि मैं फॉर्म को और अधिक अजाक्स-वाई बनाने की कोशिश कर रहा हूं ताकि उपयोगकर्ता तस्वीर को अपलोड कर दे और व्यक्ति को ब्योरे को सहेजने से पहले इसे सफलतापूर्वक अपलोड कर सकें।

<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
    <input type="submit"> 
</form> 

तरह से मैं यह काम करता है बनाने के लिए आशा करती हूं कि: बात यह है कि मुझे परेशानी दे रही है कि यह (जो अपलोड फ़ॉर्म अंदर विवरण फार्म है), एक नेस्टेड प्रपत्र की जरूरत इसलिए की तरह लगता है उपयोगकर्ता फॉर्म के विवरण भर देगा, एक तस्वीर का चयन करें और "अपलोड करें" बटन दबाएं, फिर फ़ाइल अपलोड होने पर AJAX अपडेट करें ताकि वे अंतिम "सबमिट" बटन दबाए पहले चित्र देख सकें।

क्या अपलोड फॉर्म "फॉर्म" के अंदर "फॉर्म" में कम से कम एक अच्छा तरीका है (कम से कम पृष्ठ पर उपस्थिति में) लेकिन HTML में विवरण फ़ॉर्म के अंदर घोंसला नहीं है?

Answer 1

आपको वैध HTML में एक दूसरे के अंदर घोंसला बनाने की अनुमति नहीं है। साथ ही, XMLHTTPRequest ऑब्जेक्ट्स (सबसे आम AJAX तकनीक) के माध्यम से फ़ाइल अपलोड अधिकांश ब्राउज़रों में काम नहीं करते हैं।

हालांकि, सभी खो नहीं गए हैं। AJAX अपलोड के लिए, आपको यहां एक आईएफआरएएम का उपयोग करने की आवश्यकता होगी, जैसा कि यहां प्रस्तुत किया गया है: http://www.webtoolkit.info/ajax-file-upload.html

जिस दृष्टिकोण के लिए मैं सुझाव दूंगा वह इसे तीन form तत्वों में विभाजित करना है। आपके पास एक फॉर्म होगा जो अपलोड फॉर्म, अपलोड फॉर्म और अपलोड फॉर्म के बाद फ़ील्ड्स रखने वाले फॉर्म से पहले फ़ील्ड रखता है। पहले फॉर्म में कोई सबमिट बटन नहीं होगा। पहले फॉर्म में फ़ील्ड तीसरे रूप में छिपे हुए इनपुट के रूप में डुप्लिकेट किए जाते हैं। जब अंतिम फॉर्म का सबमिट बटन क्लिक किया जाता है, तो कुछ जावास्क्रिप्ट चलाएगा जो फ़ील्ड डेटा को पहले फॉर्म से तीसरे स्थान पर कॉपी करेगा, इसलिए यह अंतिम रूप से सबमिट हो जाता है।

उदाहरण के लिए, अपने HTML ऐसी लग सकती है ::

<form name="details1"> 
    <input id="fake_detail1" name="detail1" type="text"/> 
    <input id="fake_detail2" name="detail2" type="text"/> 
</form> 
<form name="pictureupload"> 
    <input type="file" name="pic"> 
    <input type="submit" name="upload" value="Upload"> 
</form> 
<form name="details2"> 
    <input id="detail1" name="detail1" type="hidden"/> 
    <input id="detail2" name="detail2" type="hidden"/> 
    <input id="detail3" name="detail3" type="text"/> 
    <input type="submit"> 
</form> 

Answer 2

आप पृष्ठ पर किसी अन्य स्थान पर "नेस्टेड" फ़ॉर्म जगह कर सकते हैं और जब आपका उपयोगकर्ता पर एक "चित्र अपलोड करें क्लिक करता है केवल यह दिखाने के। .. "बटन।

नेस्टेड फॉर्म प्रारंभ में अदृश्य हो सकता है। कुछ बहुत अच्छे पॉपअप हैं जो आपको बाहरी रूप में नेस्टेड फॉर्म प्रदर्शित करने की अनुमति देते हैं और उपयोगकर्ता को नेस्टेड फॉर्म को स्वतंत्र रूप से अपलोड करने की अनुमति देते हैं।

<div id="nestedform"> 
    <form name="pictureupload"> 
     <input type="file" name="pic"> 
     <input type="submit" name="upload" value="Upload"> 
    </form> 
</div> 

<div id="mainform"> 
<form name="details"> 
    <input name="detail1"> 
    <input name="detail2"> 
    <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a> 
    <input type="submit"> 
</form> 
</div>