rintoug · September 15, 2020 08:35
diff --git a/upload_form.php b/upload_form.php
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Welcome to CodeIgniter 4!</title>
 	<meta name="description" content="The small framework with powerful features">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>

 	<!-- STYLES -->
 	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" >
 	<link href="https://getbootstrap.com/docs/4.5/examples/floating-labels/floating-labels.css" rel="stylesheet">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 	
 </head>
 <body>


 <!-- CONTENT -->

 <main style="width:500px;margin:0 auto;">
 <form class="form-signin">

  <div id="message"></div>
  <div class="text-center mb-4">
    
    <h1 class="h3 mb-3 font-weight-normal">Upload Multiple Files</h1>
    <p>This form capable of upload multiple images at once.</p>
  </div>

  <div class="form-label-group">
    <input type="file" id="files" name="files[]" multiple="multiple" >
    <label for="inputEmail">Files</label>
  </div>

  
  <button class="btn btn-lg btn-primary btn-block" id="upload_btn" type="button">Upload</button>
  <p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p>
 </form>
 </main>


 <script type="text/javascript">
 	$(document).ready(function (e) {
 		$('#upload_btn').on('click', function () {
 			var formData = new FormData();
 			var totalFilesLen = document.getElementById('files').files.length;
 			for (var i = 0; i < totalFilesLen; i++) {
 				formData.append("files[]", document.getElementById('files').files[i]);
 			}
 			$.ajax({
 				url: 'http://localhost:8888/codeigniter/public/upload/doupload',  
 				dataType: 'text', 
 				cache: false,
 				contentType: false,
 				processData: false,
 				data: formData,
 				type: 'post',
 				success: function (response) {
 					$('#message').html(response);
 				},
 				error: function (response) {
 					$('#message').html(response); 
 				}
 			});
 		});
 	});
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Welcome to CodeIgniter 4!</title>
	<meta name="description" content="The small framework with powerful features">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" type="image/png" href="/favicon.ico"/>

	<!-- STYLES -->
	<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" >
	<link href="https://getbootstrap.com/docs/4.5/examples/floating-labels/floating-labels.css" rel="stylesheet">
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

	</head>
	<body>


	<!-- CONTENT -->

	<main style="width:500px;margin:0 auto;">
	<form class="form-signin">

	<div id="message"></div>
	<div class="text-center mb-4">

	<h1 class="h3 mb-3 font-weight-normal">Upload Multiple Files</h1>
	<p>This form capable of upload multiple images at once.</p>
	</div>

	<div class="form-label-group">
	<input type="file" id="files" name="files[]" multiple="multiple" >
	<label for="inputEmail">Files</label>
	</div>


	<button class="btn btn-lg btn-primary btn-block" id="upload_btn" type="button">Upload</button>
	<p class="mt-5 mb-3 text-muted text-center">© 2017-2020</p>
	</form>
	</main>


	<script type="text/javascript">
	$(document).ready(function (e) {
	$('#upload_btn').on('click', function () {
	var formData = new FormData();
	var totalFilesLen = document.getElementById('files').files.length;
	for (var i = 0; i < totalFilesLen; i++) {
	formData.append("files[]", document.getElementById('files').files[i]);
	}
	$.ajax({
	url: 'http://localhost:8888/codeigniter/public/upload/doupload',
	dataType: 'text',
	cache: false,
	contentType: false,
	processData: false,
	data: formData,
	type: 'post',
	success: function (response) {
	$('#message').html(response);
	},
	error: function (response) {
	$('#message').html(response);
	}
	});
	});
	});
	</script>

	</body>
	</html>