HTML5のXMLHttpRequestを使ってページ遷移しないでファイルをアップロードして、その中身をページ内に表示させる、というサンプルです。
jQueryを使って
$.ajax()
とかやるのがまだまだメジャーだと思いますが、この方がすっきりしているので、こっちを使ってみます。
参考
https://dzone.com/articles/file-upload-and-progress
//Javascript
function uploadFiles(url, files) {
var formData = new FormData();
//このサンプルでは一つのファイルしか送信しませんが、複数のファイルを送れます
for (var i = 0, file; file = files[i]; ++i) {
formData.append("file", file);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.onload = function(e) {
};
xhr.upload.addEventListener("progress", progressFunction, false);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
$("#file_content").html(xhr.response);
}
}
xhr.send(formData);
}
document.querySelector('input[type="file"]').addEventListener('change', function(e) {
uploadFiles('index.php?action=transport_route/geoJsonUpload', this.files);
}, false);
function progressFunction(evt){
var progressBar = document.getElementById("progressBar");
var percentageDiv = document.getElementById("percentageCalc");
if (evt.lengthComputable) {
progressBar.max = evt.total;
progressBar.value = evt.loaded;
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";
}
}
//HTML <FORM METHOD="POST" action="#" enctype="multipart/form-data"> <div>ファイルアップロード</div> <div> <p>※ファイルサイズは5メガ以内</p> <input type="file" name="geojson" /> <input type="submit" onclick="return sendForm(this.form);"> <progress id="progressBar" value="0" max="100"> </progress> </div> <div id ="percentageCalc"></div> <div id ="file_content"></div> </FORM>
//PHP Postされたファイルを中身チェックして、中身を表示するだけ
//このサンプルでは、ファイルをサーバーで移動したりしません。
<?php
try {
if (!isset($_FILES['file']['error']) || !is_int($_FILES['file']['error'])) {
throw new RuntimeException('パラメータが不正です');
}
if ($_FILES ['file'] ['error'] == UPLOAD_ERR_NO_FILE) {
throw new RuntimeException('ファイルが選択されていません');
}else if ($_FILES ['file'] ['type'] != 'application/octet-stream'&& // checks for errors
is_uploaded_file ( $_FILES ['file'] ['tmp_name'] )) {
throw new RuntimeException('ファイル形式が正しくありません');
}else if ($_FILES ['file'] ['size'] > 5242880&& // checks for errors
is_uploaded_file ( $_FILES ['file'] ['tmp_name'] )) {
throw new RuntimeException('ファイルサイズが5M以上です');
}else if ($_FILES ['file'] ['error'] == UPLOAD_ERR_OK && // checks for errors
is_uploaded_file ( $_FILES ['file'] ['tmp_name'] )) { // checks that file is uploaded
echo file_get_contents ( $_FILES ['file'] ['tmp_name'] );
}
} catch ( RuntimeException $e ) {
echo '{"error":"'.$e->getMessage ().'"}';
}
?>