現在の言語: 日本語

戻る

ファイルアップロード
ajax

ajaxを使用してhtml側からファイルをアップロードします。
サーバーではphpを使用してファイルを保存して結果をhtml側で受け取ります。

[サンプル]

copy
[test6.html(javascript)]
async function uploadFile() {
    const fileInput = document.getElementById('file-input');
    const result = document.getElementById('result');
    const uploadedImage = document.getElementById('image');
    const file = fileInput.files[0];

    if (!file) {
        result.textContent = 'ファイルが選択されていません。';
        return;
    }

    result.textContent = 'アップロード中...';

    // FormDataオブジェクトを作成し、ファイルを追加します
    // 'image'というキー名でPHPに送信します。
    const formData = new FormData();
    formData.append('image', file);

    try {
        // Fetch APIでPOSTリクエストを送信します
        const response = await fetch('./img/test6.php', {
            method: 'POST',
            body: formData // FormDataをそのままbodyに指定します
        });

        if (!response.ok) {
            throw new Error('サーバーエラーが発生しました。');
        }
		const json = await response.json();
		
		if (json.status === 'success') {
			result.textContent = 'アップロード成功: ' + json.message;
			uploadedImage.src = json.file_url;
			uploadedImage.style.display = 'block';
		} else {
			result.textContent = 'アップロード失敗: ' + json.message;
		}
    } catch (error) {
        console.error('エラー:', error);
        result.textContent = '通信エラーまたはサーバーエラーが発生しました。';
    }
}
const fileInput = document.getElementById('file-input');
const fileContentElement = document.getElementById('file-content');
const image = document.getElementById('image');
image.style.display = "none";
 
let fileType = 0;//[0]not image [1]image
 
fileInput.addEventListener('change', (event) => 
{
	const file = event.target.files[0];
	if (!file) 
	{
		return;
	}
 
	const reader = new FileReader();
 
	reader.onload = (e) => {
		const content = e.target.result;
		if(fileType == 0)
		{
			fileContentElement.textContent = content;
			fileContentElement.style.display = "block";
			image.style.display = "none";
		}
		else
		{
			fileContentElement.textContent = "";
			image.src = content;
			fileContentElement.style.display = "none";
			image.style.display = "block";
		}
	};
 
	reader.onerror = (e) => {
		console.error('it occur error to load file.', e);
		fileContentElement.textContent = 'it cannot read file.';
	};
	if(file.type.startsWith("image/"))
	{
		fileType = 1;
		reader.readAsDataURL(file, 'UTF-8');
	}
	else
	{
		fileType = 0;
		reader.readAsText(file);
	}
});

[test6.php]
header('Content-Type: application/json; charset=UTF-8');

$response = [];
$uploadDir = 'uploads/'; // 保存先ディレクトリ

if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

if (isset($_FILES['image']) && $_FILES['image']['error'] === UPLOAD_ERR_OK) {
    $fileTmpPath = $_FILES['image']['tmp_name'];
    $fileName = basename($_FILES['image']['name']);//パスを除くファイル名を取得
    $fileNameCmps = explode(".", $fileName);
    $fileExtension = strtolower(end($fileNameCmps));
    $newFileName = md5(time() . $fileName) . '.' . $fileExtension;
    $destPath = $uploadDir . $newFileName;

    $allowedfileExtensions = array('jpg', 'png', 'gif', 'jpeg');
    if (in_array($fileExtension, $allowedfileExtensions)) {
        // ファイルを一時ディレクトリから指定の場所に移動
        if (move_uploaded_file($fileTmpPath, $destPath)) {
            $response['status'] = 'success';
            $response['message'] = 'ファイルが正常にアップロードされました。';
            //$response['file_url'] = $destPath; // ブラウザからアクセスできるURL
            $response['file_url'] = 'img/' . $destPath;
        } else {
            $response['status'] = 'error';
            $response['message'] = 'ファイルの移動に失敗しました。ディレクトリの書き込み権限を確認してください。';
        }
    } else {
        $response['status'] = 'error';
        $response['message'] = '許可されていないファイル形式です。';
    }
} else {
    $response['status'] = 'error';
    $response['message'] = 'ファイルアップロードエラー。';
}

// JSONを返す
echo json_encode($response);
copy
[test6.html(javascript)]
async function uploadFile() {
    const fileInput = document.getElementById(‘file-input’);
    const result = document.getElementById(‘result’);
    const uploadedImage = document.getElementById(‘image’);
    const file = fileInput.files[0];

    if (!file) {
    result.textContent = ‘No file selected.’;
    return;
}

result.textContent = ‘Uploading...’;

// Create a FormData object and add the file
// Send it to PHP with the key name ‘image’.
    const formData = new FormData();
    formData.append(‘image’, file);

    try {
        // Send POST request using Fetch API
        const response = await fetch(‘./img/test6.php’, {
            method: ‘POST’,
            body: formData // Pass FormData directly as body
        });

        if (!response.ok) {
            throw new Error(‘Server error occurred.’);
        }
        const json = await response.json();
        
        if (json.status === ‘success’) {
            result.textContent = ‘Upload successful: ’ + json.message;
            uploadedImage.src = json.file_url;
			uploadedImage.style.display = ‘block’;
        } else {
            result.textContent = ‘Upload failed: ’ + json.message;
        }
    } catch (error) {
        console.error(‘Error:’, error);
        result.textContent = ‘A communication error or server error occurred.’;
    }
}
const fileInput = document.getElementById(‘file-input’);
const fileContentElement = document.getElementById(‘file-content’);
const image = document.getElementById(‘image’);
image.style.display = “none”;
 
let fileType = 0; // [0] not image [1] image
 
fileInput.addEventListener(‘change’, (event) => 
{
    const file = event.target.files[0];
    if (!file) 
    {
        return;
    }
 
    const reader = new FileReader();
 
    reader.onload = (e) => {
        const content = e.target.result;
		if(fileType == 0)
        {
            fileContentElement.textContent = content;
            fileContentElement.style.display = “block”;
            image.style.display = “none”;
        }
        else
        {
            fileContentElement.textContent = “”;
            image.src = content;
			fileContentElement.style.display = “none”;
            image.style.display = “block”;
        }
    };
 
    reader.onerror = (e) => {
        console.error(‘An error occurred while loading the file.’, e);
        fileContentElement.textContent = ‘The file could not be read.’;
    };
	if(file.type.startsWith(“image/”))
    {
        fileType = 1;
        reader.readAsDataURL(file, ‘UTF-8’);
    }
    else
    {
        fileType = 0;
        reader.readAsText(file);
    }
});

[test6.php]
header(‘Content-Type: application/json; charset=UTF-8’);

$response = [];
$uploadDir = ‘uploads/’; // Destination directory

if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0755, true);
}

if (isset($_FILES[‘image’]) && $_FILES[‘image’][‘error’] === UPLOAD_ERR_OK) {
    $fileTmpPath = $_FILES[‘image’][‘tmp_name’];
    $fileName = basename($_FILES[‘image’][‘name’]); // Get filename without path
    $fileNameCmps = explode(“.”, $fileName);
    $fileExtension = strtolower(end($fileNameCmps));
    $newFileName = md5(time() . $fileName) . ‘.’ . $fileExtension;
    $destPath = $uploadDir . $newFileName;

    $allowedfileExtensions = array(‘jpg’, ‘png’, ‘gif’, ‘jpeg’);
    if (in_array($fileExtension, $allowedfileExtensions)) {
        // Move file from temporary directory to specified location
        if (move_uploaded_file($fileTmpPath, $destPath)) {
            $response[‘status’] = ‘success’;
            $response[‘message’] = ‘File uploaded successfully.’;
            //$response[‘file_url’] = $destPath; // URL accessible from the browser
            $response[‘file_url’] = ‘img/’ . $destPath;
        } else {
            $response[‘status’] = ‘error’;
            $response[‘message’] = ‘Failed to move the file. Please check the directory's write permissions.’;
        }
    } else {
        $response[‘status’] = ‘error’;
        $response[‘message’] = ‘Unsupported file format.’;
    }
} else {
    $response[‘status’] = ‘error’;
    $response[‘message’] = ‘File upload error.’;
}

// Return JSON
echo json_encode($response);

input type="file" 要素とJavaScriptのFormDataを組み合わせます。

const formData = new FormData();
FormData APIは、ブラウザの標準機能です。

HTTPメソッドHTTPリクエストのボディ
データの形式multipart/form-data
(バイナリを含む)
データの構築FormData API
主な用途テキストや画像およびファイルなどの大容量をアップロード

POST (FormData)
「multipart/form-data」という形式でデータが送られます。
一つのリクエストの中に、テキストデータや画像ファイルといった境界線を設けて、
複数の種類のデータを混在させて送ることができる特殊な形式です。
この形式により、テキストとバイナリデータ(画像)を同時に効率よく送信できます。

const reader = new FileReader();
ファイルを読み込みこむためのオブジェクトインスタンスを生成しています。

reader.onload
読み込み完了の通知を行います。
ファイルの読み込みは非同期処理です。
非同期処理では処理の開始を指示する前に、
完了したときに何をするべきか？
を設定しておく必要があります。
そのためファイルを読み込む処理を実装する前にonloadを実装しています。

const content = e.target.result;
resultは結果の取得をするプロパティです。
読み込まれたファイルの内容が格納されます。

reader.readAsDataURL(file, 'UTF-8');
ファイルをbase64エンコードされたデータURLとして読み込みます。
画像などのプレビューなどに使われます。

reader.readAsText(file);
テキストファイルとして読み込みます。




戻る

著作権情報
ホームページおよプリ等に掲載されている情報等については、いかなる保障もいたしません。
ホームページおよびアプリ等を通じて入手したいかなる情報も複製、販売、出版または使用させたり、
または公開したりすることはできません。
当方は、ホームページおよびアプリ等を利用したいかなる理由によっての障害等が発生しても、
その結果ホームページおよびアプリ等を利用された本人または他の第三者が被った損害について
一切の責任を負わないものとします。