ホームページ >バックエンド開発 >PHPチュートリアル >PHP、jQuery、AJAX を使用して Ajax を利用した複数のファイルのアップロードを実装するにはどうすればよいですか?
PHP、jQuery、および AJAX を使用した Ajax を利用した複数のファイルのアップロード
PHP、jQuery、および AJAX を使用して複数のファイルをアップロードするには、次の手順を実行します。これらの手順:
HTMLフォーム:
<form enctype="multipart/form-data" action="upload.php" method="post"> <input name="file[]" type="file" /> <button class="add_more">Add More Files</button> <input type="button">
JavaScript (ファイルの追加):
$(document).ready(function() { $('.add_more').click(function(e) { e.preventDefault(); $(this).before("<input name='file[]' type='file' />"); }); });
JavaScript (ファイルのアップロード):
$('body').on('click', '#upload', function(e) { e.preventDefault(); var formData = new FormData($(this).parents('form')[0]); $.ajax({ url: 'upload.php', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, success: function (data) { alert("Data Uploaded: " + data); }, data: formData, cache: false, contentType: false, processData: false }); return false; });
PHP ファイルのアップロード処理:
for ($i = 0; $i < count($_FILES['file']['name']); $i++) { $target_path = "uploads/"; $ext = explode('.', basename($_FILES['file']['name'][$i])); $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext) - 1]; if (move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { echo "The file has been uploaded successfully <br />"; } else { echo "There was an error uploading the file, please try again! <br />"; } }
このコードは、Ajax リクエストを介して複数のファイルをアップロードするプロセスを合理化します。
以上がPHP、jQuery、AJAX を使用して Ajax を利用した複数のファイルのアップロードを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。