プログレスバーも表示する非フラッシュアップロードパネルを作成しようとしています。私たちのサーバーにはPHP5.3があります(現時点では5.4にアップグレードできないため、新しいアップロードの進行状況機能は使用できません=> http://php.net/manual/en/session.upload-progress.php)。フラッシュベースのソリューション、拡張機能などは使用できません。
したがって、AJAXと組み合わせてXMLHttpRequestを使用してみました。ここでの問題は、私が部分的な成功しか達成していないことです。
なんとかサーバーに約380MBのファイルをアップロードして保存しましたが、4 GBのような大きなファイルを試してみると、サーバーに保存されません(Firebugで確認すると、 「POSTが中止されました」と言います)。
もう1つの奇妙なことは、同じファイルでxhr.upload.loadedがxhr.upload.totalの同じディメンションで始まり、そこからカウントを開始することです。
誰かがこの問題を解決する方法を知っているか、別の解決策を持っていますか?
クライアントコードは次のとおりです。
<script type="application/javascript" src="jquery.js"></script>
<script type="application/javascript">
function uploadToServer()
{
fileField = document.getElementById("uploadedFile");
var fileToUpload = fileField.files[0];
var xhr = new XMLHttpRequest();
var uploadStatus = xhr.upload;
uploadStatus.addEventListener("progress", function (ev) {
if (ev.lengthComputable) {
$("#uploadPercentage").html((ev.loaded / ev.total) * 100 + "%");
}
}, false);
uploadStatus.addEventListener("error", function (ev) {$("#error").html(ev)}, false);
uploadStatus.addEventListener("load", function (ev) {$("#error").html("APPOSTO!")}, false);
xhr.open(
"POST",
"serverUpload.php",
true
);
xhr.setRequestHeader("Cache-Control", "no-cache");
xhr.setRequestHeader("Content-Type", "multipart/form-data");
xhr.setRequestHeader("X-File-Name", fileToUpload.fileName);
xhr.setRequestHeader("X-File-Size", fileToUpload.fileSize);
xhr.setRequestHeader("X-File-Type", fileToUpload.type);
//xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.send(fileToUpload);
}
$(function(){
$("#uploadButton").click(uploadToServer);
});
</script>
HTML部分:
<form action="" name="uploadForm" method="post" enctype="multipart/form-data">
<input id="uploadedFile" name="fileField" type="file" multiple />
<input id="uploadButton" type="button" value="Upload!">
</form>
<div id="uploadPercentage"></div>
<div id="error"></div>
サーバー側のコード:
<?php
$path = "./";
$filename = $_SERVER['HTTP_X_FILE_NAME'];
$filesize = $_SERVER['CONTENT_LENGTH'];
$file = "log.txt";
$fo= fopen($file, "w");
fwrite($fo, $path . PHP_EOL);
fwrite($fo, $filename . PHP_EOL);
fwrite($fo, $filesize . PHP_EOL);
fwrite($fo, $path . $filename . PHP_EOL);
file_put_contents($path . $filename,
file_get_contents('php://input')
);
?>