参照禁止！らくがきだべ・・・

« smarty array_key__exist | メイン | javascript class的な »

2017年05月18日

ダウンロードプログレッシブバー

アップロードのプログレッシブバーは簡単にできるようになっている。

$.ajax({
中略

xhr: function() {
var XHR = $.ajaxSettings.xhr();
if (XHR.upload) {
XHR.upload.addEventListener(
'progress',
function(e) {
var progre = parseInt(e.loaded / e.total * 10000) / 100;
console.log( progre + "%");
}, false);
}
return XHR;
},

 

ダウンロードができねえ。そうアップロードのときのようには出来ない。

なので ファイルをダウンロードさせるのに直接ファイルをダウンロードさせずに、
プログラムをかます。その際どの程度ファイルを投げたかをサーバー内のファイルに記載
そのデータを表側のjavascriptでsettimeoutでなんども取得して画面に進捗表示する。

filesize　にてファイルのサイズ取得

$handle = fopen($path, "rb");

$downloadedsize = 0;
while(!feof($handle))
{
print fread($handle, 4096);
$downloadedsize += 4096;

んでここにてナンパーか計算して外部ファイルに記述

ob_flush();
flush();
}
fclose();

と思ったが、調べてみると出来た・・・

	$.ajax({
		url: "depth.txt",
		type: 'GET',
		dataType: "text",
		cache: true,
		success: function(data) {
			lists = CSVToArray(data);
			google.maps.event.addListener(map, 'bounds_changed', showPointFunc);
			$("body").css({
				opacity: 1
			});
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			var mess;
			console.error("XMLHttpRequest : " + XMLHttpRequest.status);
			console.error("textStatus     : " + textStatus);
			console.error("errorThrown    : " + errorThrown.message);
			if (textStatus === "timeout") {
				mess = "タイムアウトしました。低速回線の場合タイム・アウトする可能性があります。何度施行しても状況が変わらない場合、システム管理者に連絡してください";
			} else {
				mess = "データ読み込みでエラー発生";
			}
			alert(mess);
			return;
		},
		xhr: function() {
			// get the native XmlHttpRequest object
			var xhr = $.ajaxSettings.xhr();
			xhr.onprogress = function(e) {
				console.log(e.loaded / e.total);
			};
			return xhr;
		}
	});

投稿者 muuming : 2017年05月18日 17:48