jQuery アップロード ファイル AJAX
オブジェクトのような構成では、主に複数のキーと値のペアを使用して AJAX を定義します。 これらのキーと値はサーバー側をガイドし、サーバーからデータを読み取ってサーバーに送信できるようにします。
jQuery を使用すると、データまたはファイルをサーバーに投稿し、完全にアップロードされたかどうかを確認できる例を簡単に実装できます。
次のセクションでは、ユーザーから入力値を受け取り、後でサーバーにポストするインスタンスについて説明します。 また、ページをリロードせずにデータが更新されているかどうかも調べます。
また、更新または投稿されたデータを読み取ります。 単語をよりよく表示するために、コード セグメントにジャンプしましょう。
AJAX と jQuery を使用してファイルと入力をアップロードする
通常、ファイルのアップロードは post アクションを視覚化するのが簡単です。 したがって、この例では、テキスト入力 フィールドと ファイル入力 フィールドがあります。
フィールドへの投稿が成功すると、アサーティブ メッセージを受け取り、データが追加されます。
このタスクでは、HTML 部分、jQuery 部分、そして最後に PHP ファイルを使用します。 各ファイルには仕様があります。
HTML は、アップロードのタスクを開始する UI を示します。 次に、jQuery セグメントは id を介して入力フィールドの参照を取得します。
また、ここに AJAX を追加し、AJAX 内の PHP ファイルを URL として接続します。 PHP ファイルには、データがポストされるディレクトリ パスが含まれており、結果が出力に表示されます。
XAMMP サーバー経由で Apache ソフトウェアを使用します。
- まず、XAMMP をインストールして Apache を起動する必要があります。
- また、PHP をインストールし、PHP のパスを環境変数 > システム変数のパスに追加する必要があります。
- XAMMP フォルダに移動し、
htdocsディレクトリを見つけます。 htdocsディレクトリに、index.html、index.js、およびupload.phpファイルを保存するフォルダーを作成します。- この新しいフォルダーに
imageという名前のフォルダーを作成します。
コードスニペット：
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload file</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</head>
<body style="background-color: gray">
<div class="container" style="width:50%;margin:25%;background:white;border:2px solid white">
<div style="padding: 10px">
<form id="myform" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="Name"></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label for="Image"></label>
<input type="file" id="image" class="form-control" name="image" placeholder="Image">
</div>
<div class="form-group" style="height:10px"></div>
<div class="form-group">
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send">
</div>
</form>
</div>
</div>
</body>
</html>
index.js:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var data = new FormData();
var form_data = $('#myform').serializeArray();
$.each(form_data, function(key, input) {
data.append(input.name, input.value);
});
var image = $('#image').val();
if (image != '') {
var file_data = $('input[name="image"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append('image[]', file_data[i]);
}
}
var request = $.ajax({
url: 'upload.php',
type: 'post',
processData: false,
contentType: false,
data: data,
});
request.done(function(response, textStatus, jqXHR) {
console.log('done!');
console.log(response);
});
request.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
})
})
})
upload.php:
<?php
$dir = __DIR__.'/image/'.$_FILES["image"]["name"][0];
if(move_uploaded_file($_FILES["image"]["tmp_name"][0], $dir))
{
$data = array(
"Status" => "Done",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
else
{
$data = array(
"Status" => "Failed",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
?>
出力：
次に、これらすべてのインストールと準備の後、HTML に Bootstrap と jQuery CDN を設定し、コードに従いました。 $.each() メソッドを使用してフォーム入力をループしました。
最後に、ブラウザーに移動して localhost/"folder_name(htdocs 内)" と入力すると、例のような UI が表示されます。 そして、デモンストレーションのように、コンソールで詳細を確認してみて、ファイルが正しくアップロードされているかどうか、プロジェクト フォルダーの image フォルダーを確認します。
