এক্সএমএলএইচটিপিআরকিউয়েস্ট থেকে কীভাবে অগ্রগতি পাবেন

Question

কোনও এক্সএমএলএইচটিপিআরকেস্ট (বাইটস আপলোড, বাইটস ডাউনলোড) এর অগ্রগতি পাওয়া কি সম্ভব?

ব্যবহারকারী কোনও বড় ফাইল আপলোড করার সময় এটি একটি অগ্রগতি বারটি দেখানোর জন্য কার্যকর হবে। স্ট্যান্ডার্ড এপিআই এটি সমর্থন করে বলে মনে হচ্ছে না, তবে সম্ভবত সেখানে কোনও ব্রাউজারে কিছু মানহীন এক্সটেনশন আছে? সর্বোপরি এটি দেখতে খুব সুন্দর একটি বৈশিষ্ট্য বলে মনে হচ্ছে, ক্লায়েন্ট জানেন যে কতগুলি বাইট আপলোড / ডাউনলোড হয়েছিল were

দ্রষ্টব্য: আমি "অগ্রগতির জন্য সার্ভারের পোল" বিকল্প সম্পর্কে সচেতন (এটি এখনই আমি যা করছি)। এটির সাথে মূল সমস্যাটি (জটিল সার্ভার-সাইড কোড ব্যতীত) হ'ল সাধারণত কোনও বড় ফাইল আপলোড করার সময় ব্যবহারকারীর সংযোগটি পুরোপুরি হোজ্জিত হয়, কারণ বেশিরভাগ আইএসপিগুলি নিম্ন প্রবাহের প্রস্তাব দেয়। সুতরাং অতিরিক্ত অনুরোধ করা যতটা সাধ্য আমি আশা করি তেমন প্রতিক্রিয়াশীল নয়। আমি আশা করছিলাম যে এই তথ্যটি পাওয়ার কোনও উপায় আছে (সম্ভবত অ-মানক), যা ব্রাউজারের সর্বদা রয়েছে।

Answer 1

আপলোড করা বাইটগুলির জন্য এটি বেশ সহজ। শুধু xhr.upload.onprogressঘটনা নিরীক্ষণ । ব্রাউজারটি যে ফাইলগুলি আপলোড করতে হবে তার আকার এবং আপলোড করা ডেটার আকার জানে তাই এটি অগ্রগতির তথ্য সরবরাহ করতে পারে।

ডাউনলোড করা বাইটগুলির জন্য (যখন তথ্যটি পেয়ে xhr.responseTextযাবেন) এটি কিছুটা বেশি কঠিন কারণ ব্রাউজারটি জানে না যে সার্ভারের অনুরোধে কতগুলি বাইট প্রেরণ করা হবে। ব্রাউজারটি এক্ষেত্রে একমাত্র জানে যে এটি প্রাপ্ত বাইটগুলির আকার।

এর জন্য একটি সমাধান রয়েছে, Content-Lengthব্রাউজারটি যে বাইট পেতে চলেছে তার মোট আকার পেতে সার্ভার স্ক্রিপ্টে একটি শিরোনাম সেট করা যথেষ্ট ।

আরও তথ্যের জন্য https://developer.mozilla.org/en/Using_XMLHttpRequest এ যান ।

উদাহরণ: আমার সার্ভার স্ক্রিপ্ট একটি জিপ ফাইল পড়ে (এটি 5 সেকেন্ড সময় নেয়):

$filesize=filesize('test.zip');

header("Content-Length: " . $filesize); // set header length
// if the headers is not set then the evt.loaded will be 0
readfile('test.zip');
exit 0;

এখন আমি সার্ভার স্ক্রিপ্টের ডাউনলোড প্রক্রিয়াটি পর্যবেক্ষণ করতে পারি, কারণ আমি জানি এটির মোট দৈর্ঘ্য:

function updateProgress(evt) 
{
   if (evt.lengthComputable) 
   {  // evt.loaded the bytes the browser received
      // evt.total the total bytes set by the header
      // jQuery UI progress bar to show the progress on screen
     var percentComplete = (evt.loaded / evt.total) * 100;  
     $('#progressbar').progressbar( "option", "value", percentComplete );
   } 
}   
function sendreq(evt) 
{  
    var req = new XMLHttpRequest(); 
    $('#progressbar').progressbar();    
    req.onprogress = updateProgress;
    req.open('GET', 'test.php', true);  
    req.onreadystatechange = function (aEvt) {  
        if (req.readyState == 4) 
        {  
             //run any callback here
        }  
    };  
    req.send(); 
}

Comments

লক্ষণীয় বিষয়, "সামগ্রী-দৈর্ঘ্য" আনুমানিক দৈর্ঘ্য নয়, এটির সঠিক দৈর্ঘ্যটি খুব ছোট হতে হবে এবং ব্রাউজারটি ডাউনলোডটি খুব বেশি দীর্ঘ করে ফেলবে এবং ব্রাউজারটি ডাউনলোডটি সম্পূর্ণ করতে ব্যর্থ বলে ধরে নেবে।

— ক্রিস চিলভার্স

@ ক্রিসচিলভারস মানে পিএইচপি ফাইলটি সঠিকভাবে গণনা করা যায় না, তাই না?

— হাইড্রোপার

উদাহরণস্বরূপ নিস্যাম্যাট এটি কোনও ফাইল থেকে আসে বলে ঠিক হবে তবে আপনি যদি স্মৃতি থেকে জিপটি প্রবাহিত করেন তবে আপনি কেবল কোনও সামগ্রীর দৈর্ঘ্য তৈরি করতে পারবেন না বা এটি অনুমান করতে পারবেন না।

— ক্রিস চিলভার্স

@TheProHands আপনি যখন একটি। Php পৃষ্ঠাতে যান, সার্ভার পিএইচপি ফাইল চালায় এবং আপনাকে এর আউটপুট প্রেরণ করে । সার্ভারটি আউটপুটটির দৈর্ঘ্য প্রেরণ করা উচিত,। Php ফাইল নয়।

— লিউজ

কেউ কি দয়া করে "progress ('# প্রগতি বার') লাইনটি ব্যাখ্যা করতে পারেন progress কারে কয়? এটি কি একটি নির্দিষ্ট প্লাগইন চালু করছে? কিভাবে কাজ করে? উত্তরটি নতুন ব্যবহারকারীদের কাছে বোধগম্য করুন।

— জ্যাক

Answer 2

ফায়ারফক্স এক্সএইচআর ডাউনলোডের অগ্রগতি ইভেন্টগুলিকে সমর্থন করে ।

Answer 3

সর্বাধিক প্রতিশ্রুতিবদ্ধ পদ্ধতির মধ্যে একটিটি দ্বিতীয় যোগাযোগের চ্যানেলটি সার্ভারে ফিরে যাওয়ার অনুরোধ করে যাতে স্থানান্তরটি কতটা সম্পন্ন হয়েছে তা জিজ্ঞাসা করে।

Comments

আমি মনে করি লিঙ্কটি মারা যেতে পারে

— রনি রয়স্টন

Answer 4

ফায়ারফক্স 3.5 আপলোড অগ্রগতি ইভেন্ট সমর্থন করবে

Answer 5

মোট আপলোড করা সামগ্রীর পক্ষে এটি হ্যান্ডেল করার কোনও উপায় বলে মনে হয় না, তবে আপনি ডাউনলোডের জন্য যা চান তার অনুরূপ কিছু রয়েছে। একবার রেডিস্টেট 3 এর পরে, আপনি স্ট্রিং হিসাবে এখন পর্যন্ত সমস্ত সামগ্রী ডাউনলোড করার জন্য পর্যায়ক্রমে রেসপন্স কোয়েস্ট করতে পারেন (এটি আইই তে কাজ করে না) যতক্ষণ না এটি সমস্ত কিছু উপলব্ধ না হয়ে এটি রেডিস্টেটে রূপান্তরিত হবে 4 মোট যে কোনও সময়ে ডাউনলোড করা বাইটগুলি প্রতিক্রিয়া পাঠ্যে স্ট্রিংয়ের মোট বাইটের সমান হবে।

আপলোড প্রশ্নে সম্পূর্ণ বা কিছুই পৌঁছানোর জন্য, যেহেতু আপনাকে আপলোডের জন্য একটি স্ট্রিং পাস করতে হবে (এবং এটির মোট বাইটগুলি নির্ধারণ করা সম্ভব) রেডিস্টেট 0 এবং 1 এর জন্য প্রেরিত মোট বাইটগুলি 0 হবে এবং রেডিস্টেটের জন্য মোট আপনি যে স্ট্রিংটি পেরিয়ে গেছেন সেটিতে মোট বাইট 2 হবে ready এবং 4 রেডিস্টেটে প্রেরিত এবং প্রাপ্ত উভয়ই মোট বাইটগুলি আসল স্ট্রিংয়ের বাইটসের যোগফল এবং প্রতিক্রিয়াংশের মোট বাইট হবে।

Answer 6

<!DOCTYPE html>
<html>
<body>
<p id="demo">result</p>
<button type="button" onclick="get_post_ajax();">Change Content</button>
<script type="text/javascript">
	function update_progress(e)
	{
	  if (e.lengthComputable)
	  {
	    var percentage = Math.round((e.loaded/e.total)*100);
	    console.log("percent " + percentage + '%' );
	  }
	  else 
	  {
	  	console.log("Unable to compute progress information since the total size is unknown");
	  }
	}
	function transfer_complete(e){console.log("The transfer is complete.");}
	function transfer_failed(e){console.log("An error occurred while transferring the file.");}
	function transfer_canceled(e){console.log("The transfer has been canceled by the user.");}
	function get_post_ajax()
	{
	  	var xhttp;
	  	if (window.XMLHttpRequest){xhttp = new XMLHttpRequest();}//code for modern browsers} 
	 	else{xhttp = new ActiveXObject("Microsoft.XMLHTTP");}// code for IE6, IE5	  	
	  	xhttp.onprogress = update_progress;
		xhttp.addEventListener("load", transfer_complete, false);
		xhttp.addEventListener("error", transfer_failed, false);
		xhttp.addEventListener("abort", transfer_canceled, false);	  	
	  	xhttp.onreadystatechange = function()
	  	{
	    	if (xhttp.readyState == 4 && xhttp.status == 200)
	    	{
	      		document.getElementById("demo").innerHTML = xhttp.responseText;
	    	}
	  	};
	  xhttp.open("GET", "http://it-tu.com/ajax_test.php", true);
	  xhttp.send();
	}
</script>
</body>
</html>

Answer 7

আপনার যদি আপনার অ্যাপাচি ইনস্টল এবং তৃতীয় পক্ষের কোডের উপর অ্যাক্সেস থাকে তবে আপনি অ্যাপাচি আপলোড প্রগতি মডিউলটি ব্যবহার করতে পারেন (যদি আপনি অ্যাপাচি ব্যবহার করেন; এছাড়াও একটি এনগিনেক্স আপলোড প্রগতি মডিউল রয়েছে )।

অন্যথায়, আপনাকে এমন একটি স্ক্রিপ্ট লিখতে হবে যা আপনি ফাইলের স্থিতির জন্য অনুরোধ করতে ব্যান্ডের বাইরে চলে যেতে পারেন (উদাহরণস্বরূপ tmp ফাইলের ফাইলসাইজ পরীক্ষা করে)।

ফায়ারফক্স 3 এ কিছু কাজ চলছে বলে আমি বিশ্বাস করি যে ব্রাউজারে আপলোড অগ্রগতি সমর্থন যুক্ত করা যায়, তবে এটি সমস্ত ব্রাউজারগুলিতে প্রবেশ করবে না এবং কিছু সময়ের জন্য ব্যাপকভাবে গৃহীত হবে (আরও করুণার কারণ)।

Answer 8

খাঁটি জাভাস্ক্রিপ্ট সহ এটি করার একমাত্র উপায় হ'ল এক ধরণের পোলিং মেকানিজম প্রয়োগ করা। সার্ভারের দ্বারা প্রাপ্ত বাইটের সংখ্যা পেতে আপনাকে নির্দিষ্ট বিরতিতে (উদাহরণস্বরূপ প্রতি 5 সেকেন্ডে) আজাক্স অনুরোধগুলি প্রেরণ করতে হবে।

আরও কার্যকর উপায় হ'ল ফ্ল্যাশ ব্যবহার করা। ফ্লেক্স উপাদান ফাইলরেফারেন্স পর্যায়ক্রমে একটি 'অগ্রগতি' ইভেন্ট প্রেরণ করে যা ইতিমধ্যে আপলোড করা বাইটের সংখ্যা ধারণ করে। আপনার যদি জাভাস্ক্রিপ্টের সাথে লেগে থাকতে হয় তবে অ্যাকশন স্ক্রিপ্ট এবং জাভাস্ক্রিপ্টের মধ্যে ব্রিজগুলি উপলব্ধ। সুসংবাদটি হ'ল এই কাজটি আপনার জন্য ইতিমধ্যে করা হয়ে গেছে :)

swfupload

এই লাইব্রেরি ফ্ল্যাশ অগ্রগতি ইভেন্টে একটি জাভাস্ক্রিপ্ট হ্যান্ডলার নিবন্ধন করতে পারবেন।

এই সমাধানটির সার্ভারের দিক থেকে অ্যাডিশনাল রিসোর্সগুলির প্রয়োজন না হওয়ার হজ সুবিধা রয়েছে।