2011-12-12 16 views
5

मैं वर्तमान में एक वेब एप्लिकेशन पर काम कर रहा हूं जो उपयोगकर्ता को पृष्ठ को पुनः लोड किए बिना फ़ाइलों को अपलोड करने की अनुमति देता है। अब तक, उपयोगकर्ता फ़ाइलों के लिए ब्राउज़ कर सकते हैं, और जब इनपुट बदल गया है, फ़ाइलें निम्न iframe तकनीक का उपयोग कर अपलोड किए जाते हैं:इफ्रेम फ़ाइल अपलोड के लिए प्रगति बार?

HTML:

<iframe name="iframe-target" src="./Image" style="display:none;"></iframe> 
<form method="POST" enctype="multipart/form-data" id="old-style-upload" target="iframe-target" action="./Image"> 
    <input type="file" name="files[]" multiple id="old-file-picker" > 
</form> 

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

$('#old-file-picker').change(function() { 
    // Submit the form 
    $('#old-style-upload').submit(); 
}); 
$('iframe[name=iframe-target]').load(function() { 
    // Code that deals with the newly uploaded files 
    $('#old-style-upload').get(0).reset(); 
}); 

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

एकमात्र चीज जिसे मैं सोच सकता हूं वह loading gif दिखा सकता है।

उत्तर

2

ऐसा करने के लिए, यदि आप नियमित मल्टीपार्ट/फॉर्म-डेटा फॉर्म पोस्ट का उपयोग करते हैं, तो आपको सर्वर-साइड पर कोड होना होगा; वह जो क्लाइंट के ब्राउज़र में चल रहे जावास्क्रिप्ट को फ़ीड-बैक प्रगति कर सकता है। एक नज़र डालें at this previously asked question। वैकल्पिक रूप से आप फ्लैश (लेकिन शायद आप नहीं चाहते हैं) या एचटीएमएल 5 का उपयोग कर सकते हैं। आप उस प्रश्न और this question concerning XMLHTTPRequests पर एक नज़र डाल सकते हैं।

संबंधित मुद्दे