एक कस्टम अपलोड प्रगति पट्टी बनाना

Question

मैंने सभी अपलोड प्रगति पट्टी प्लगइन्स, विजेट आदि को देखा है - वे सभी चूसते हैं। वे या तो बहुत बेकार कोड के साथ बहुत भारी हैं या वे काम नहीं करते हैं।

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

ब्राउज़र यह कैसे करता है? मैं आंतरिक रूप से जानना चाहता हूं कि ब्राउज़र अपलोड करने की स्थिति को इंगित करने के लिए कैसे काम करता है ताकि शायद मैं PHP & jquery का उपयोग कर कुछ कर सकूं।

धन्यवाद।

Answer 1

Javascript/Ecmascript कर सकते हैं स्थानीय ब्राउज़र functionalitys (जो C/C++ का उपयोग करता है ज्यादातर OS APIs जो TCP/UDP सॉकेट का उपयोग के साथ साथ गड़बड़ नहीं।

JS के साथ एक प्रगति बार प्रदर्शित करने के लिए आप serverfeedback की जरूरत है। यही कारण है कि के लिए COMET की तरह एक सर्वर polling का उपयोग करके पूरा किया जा सकता है उदाहरण। लेकिन इस बिंदु पर, यह कभी भी ब्राउज़र buildin प्रगति पट्टी की तरह सटीक नहीं है। यह HTML5 WebSockets के साथ शायद बदल जाएगा।

सटीक परिणाम प्राप्त करने के लिए, आपको निरंतर आवश्यकता है एस कनेक्शन आप क्लाइंट-सर्वर अनुरोध देरी fake और gild कर सकते हैं, लेकिन यह अभी भी वहां है। मुझे नहीं पता कि Flash इस समस्या को कैसे संभालता है, लेकिन मुझे लगता है कि इसमें कनेक्शन-उन्मुख स्ट्रीम भी नहीं है (अगर मैं यहां गलत हूं तो मुझे सही करें)।

Answer 2

जावास्क्रिप्ट का उपयोग कर फ़ाइल अपलोड की प्रगति प्राप्त करने के लिए कोई विश्वसनीय विधि नहीं है। XMLHttpRequest upload.onprogress ईवेंट के लिए समर्थन कई ब्राउज़रों में एचटीएमएल 5 के साथ भी गायब है, आपको अनिवार्य रूप से फ़्लैश, या फ़ाइल अपलोड की दूसरी विधि चालू करने की आवश्यकता होगी।

this question पूछने के बाद, मैं अंततः अपनी अपलोडिंग आवश्यकताओं के लिए plupload का उपयोग करने पर बस गया।

Answer 3

चूंकि आप PHP का उपयोग करना चाहते हैं, तो मैं uploadprogress extension से शुरू करूंगा (PHP डिफ़ॉल्ट रूप से नहीं, अपलोड पूरा होने तक आपको कोई डेटा देता है; यह एक्सटेंशन ऐसी सर्वर-साइड कार्यक्षमता प्रदान करता है)। ध्यान दें कि यह PHP 5.2+ की आवश्यकता है और कॉन्फ़िगरेशन विकल्पों के बारे में picky हो सकता है। इसके commentary and demo और troubleshooting hints देखें)। PHP दस्तावेज़ comments में उपलब्ध एक संक्षिप्त अवलोकन।

एक्सटेंशन का उपयोग करके, आप अपलोड पर कुछ आंकड़े प्राप्त कर सकते हैं; तो आप AJAX के माध्यम से सर्वर को मतदान कर सकते हैं और कुछ प्रकार की प्रगति पट्टी अपडेट कर सकते हैं।

में थोड़ा और अधिक विशिष्ट होना करने के लिए:

• फार्म के लिए एक अद्वितीय पहचानकर्ता मिलता है, और एक छिपी हुई फ़ील्ड में शामिल
• अपलोड एक IFRAME में चलाना चाहिए - कुछ ब्राउज़रों अनुमति नहीं दी जाएगी डोम अपलोड करने वाले पृष्ठ पर अपडेट
• AJAX के माध्यम से सर्वर को मतदान करें (पहचानकर्ता का उपयोग करके आप किस अपलोड में रुचि रखते हैं) और परिणाम को पार्स करें (आईआईआरसी, आपको कुछ "बाइट्स_अपलोड => 123 , सामग्री-लंबाई => 1000 ")
• अपनी प्रगति पट्टी अपडेट करें (जिस तरह से आप इसे प्रदर्शित आप पर निर्भर है, मैं का उपयोग करें "एक्स% किया" प्लस जब प्रपत्र ठीक अपलोड एक ग्राफिकल बार)
• पूरे पृष्ठ रीडायरेक्ट

(ओह, और btw, पीएचपी के upload_max_filesize और post_max_size सेटिंग्स की जाँच करें अधिकतम अपलोड आकार) दोनों सीमा के रूप में

Answer 4

मैं इस नहीं है आप जो खोज रहे हैं, लेकिन मैं हाल ही में अपलोड करने के लिए plupload का उपयोग किया गया है और यह बहुत अच्छी लगती है प्लस does not को पता है फ़्लैश या विशेष रूप से एचटीएमएल 5

पर भरोसा करते हैं उदाहरण:

---

• यूआरएल (php फ़ाइल)
• कंटेनर = माता पिता div या फार्म प्रसंस्करण पेज है कि में अपलोड बटन जीवन (अपने इस सेट करने के लिए वास्तव में महत्वपूर्ण - आप कैसे के कुछ उदाहरण देखते हैं चीजों को कुछ क्रियाओं से जोड़ सकते हैं जो प्लूपलोड करता है। उदाहरण के लिए आप देख सकते हैं कि मैंने uploader.start(); को uploader.start(); हुक से जोड़ा है।
• आप भी देखने के लिए अपलोड प्रगति हुक करने के लिए संलग्न द्वारा मैं कैसे एक कस्टम अपलोड प्रोग्रेस बार बनाया है सक्षम होना चाहिए

---

plupload साइट अगर तुम मिल पर मंच पर सवाल पूछ लायक अटक गया, वे जवाब देने में अच्छे हैं!

$(function(){ 
    //plupload 
    var uploader = new plupload.Uploader({ 
     runtimes : 'gears,html5,flash', 
     browse_button : 'pickfiles', 
     container : 'form_2', 
     max_file_size : '10mb', 
     url : '<?php echo SITE_ROOT ?>plupload/upload.php', 
     //resize : {width : 320, height : 240, quality : 90}, 
     flash_swf_url : '<?php echo SITE_ROOT ?>plupload/js/plupload.flash.swf', 
     filters : [ 
      {title : "Image files", extensions : "jpg,gif,png"} 
     ] 
    }); 


uploader.init(); 

uploader.bind('FilesAdded', function(up, files) { 
    uploader.start(); 
}); 

uploader.bind('UploadProgress', function(up, file) { 
    if(file.percent < 100 && file.percent >= 1){ 
     $('#progress_bar div').css('width', file.percent+'%'); 
    } 
    else{ 
     $('#progress_bar').fadeOut(600); 
    }        
});