Learn more about fetch function.
HTML & Javascript Code:
<!DOCTYPE html>
<html>
<head>
<title> Fetch JS - Code With Mark </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function($)
{
//https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
$(document).on('click', '.btn_get_api_data', function(event)
{
event.preventDefault();
const url = 'https://randomuser.me/api/';
const options =
{
method: 'GET', // *GET, POST, PUT, DELETE
};
fetch(url, options)
.then(response => response.json())
.then(json =>
{
var str = JSON.stringify(json.results, null, 5);
$(document).find('.post_msg').html('<pre class="bg-dark text-white">'+str+'</pre>');
}
).catch(err =>
console.error(err)
);
});
//--->load user screen > start
$(document).on('click', '.btn_load_user_screen', function(event)
{
event.preventDefault();
var s1 = $(document).find('.container_user_screen').html();
$(document).find('.post_msg').html(s1);
});
//--->load user screen > end
//--->upload file > start
$(document).on('click', '.btn_upload_file_data', function(event)
{
event.preventDefault();
let e0 = $(document).find('.post_msg');
//get file objects
let f0 = e0.find('#f0')[0].files;
let f1 = e0.find('#f1')[0].files;
let f2 = e0.find('#f2')[0].files;
let fd = new FormData();
fd.append('user_name', e0.find('.user_name').val());
fd.append('user_email', e0.find('.user_email').val());
//single file
fd.append('file_obj_0',f0[0]);
//get all the files for group 1
$.each(f1, function(i1, v1)
{
fd.append('file_obj_1[]',v1);
});
//get all the files for group 2
$.each(f2, function(i2, v2)
{
fd.append('file_obj_2[]',v2);
});
const url = 'ajax.php';
const options =
{
method: 'POST',
body: fd,
};
fetch(url, options)
.then(response => response.json())
.then(json =>
{
var s1 = $(document).find('.post_msg');
var str = JSON.stringify(json, null, 5);
s1.html('<pre class="bg-dark text-white">'+str+'</pre>');
if(json.file_obj_1.length > 0)
{
$.each(json.file_obj_1, function(i1, v1)
{
var t1 = ''
+'<div class="1col-md-3">'
+'<img src="'+v1.download_file_path+'" class="rounded-circle" width="100" height="100">'
+'<br>'
+'<a href="'+v1.download_file_path+'" download class="btn btn-success">Download File</a>'
+'</div>'
;
s1.append(t1);
});
s1.append('<br><br>');
}
}
).catch(err =>
console.error(err)
);
});
//--->upload file > end
});
</script>
</head>
<body>
<div style="padding-top:30px;">
<div class="container text-center">
<h1 class="">Fetch - Upload Files </h1>
<div class="btn btn-success btn_get_api_data">Get API Data</div> | <div class="btn btn-success btn_load_user_screen">Upload File</div>
<br><br>
<div class="post_msg text-left"></div>
</div>
</div>
<div style="display:none;" class="container_user_screen">
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control user_name">
</div>
<div class="form-group">
<label >Email</label>
<input type="text" class="form-control user_email">
</div>
<div class="card" style="padding:10px;">
<label >Single File</label>
<input type="file" id="f0">
<br>
</div>
<br>
<div class="card" style="padding:10px;">
<label >Multiple Files</label>
<input type="file" id="f1" multiple>
<br>
</div>
<br>
<div class="card" style="padding:10px;">
<label >Multiple Files</label>
<input type="file" id="f2" multiple>
</div>
<br>
<span class="btn btn-primary btn_upload_file_data">Upload</span>
</div>
</body>
</html>PHP Code:
<?php
define("ABSPATH", str_replace("\\", "/", dirname(__FILE__) ));
if (isset($_SERVER['HTTPS']) &&
($_SERVER['HTTPS'] == 'on' || $_SERVER['HTTPS'] == 1) ||
isset($_SERVER['HTTP_X_FORWARDED_PROTO']) &&
$_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') {
$ssl = 'https';
}
else {
$ssl = 'http';
}
$app_url = ($ssl )
. "://".$_SERVER['HTTP_HOST']
//. $_SERVER["SERVER_NAME"]
. (dirname($_SERVER["SCRIPT_NAME"]) == DIRECTORY_SEPARATOR ? "" : "/")
. trim(str_replace("\\", "/", dirname($_SERVER["SCRIPT_NAME"])), "/");
if(isset($_POST['user_name']))
{
$el = $_POST;
$user_name = $el['user_name'];
$user_email = $el['user_email'];
$upload_folder_path = '/uploads/';
$a0 = array();
$a1 = array();
$a2 = array();
//--->upload > single file > start
if(isset($_FILES['file_obj_0']))
{
$file_obj_0 = $_FILES['file_obj_0'];
$v1 = $file_obj_0['name'];
$file_name = $v1;
$ext = pathinfo($file_name, PATHINFO_EXTENSION);
$new_file_name = 'file_obj_0_'. hash('crc32',uniqid()).'.'.$ext;
$fileDest = ABSPATH.$upload_folder_path.$new_file_name;
move_uploaded_file($file_obj_0['tmp_name'] ,$fileDest);
array_push($a0, array(
'old_file_name' => $v1,
'new_file_name' => $new_file_name,
'move_to_folder'=>$app_url.$upload_folder_path,
'download_file_path'=>$app_url.$upload_folder_path.$new_file_name,
));
}
//--->upload > single file > end
//--->upload group files > 1 > start
if(isset($_FILES['file_obj_1']))
{
$file_obj_1 = $_FILES['file_obj_1'];
foreach ($file_obj_1['name'] as $k1 => $v1)
{
$file_name = $v1;
$ext = pathinfo($file_name, PATHINFO_EXTENSION);
$new_file_name = 'file_obj_1_'. hash('crc32',uniqid()).'.'.$ext;
$fileDest = ABSPATH.$upload_folder_path.$new_file_name;
move_uploaded_file($file_obj_1['tmp_name'][$k1] ,$fileDest);
array_push($a1, array(
'old_file_name' => $v1,
'new_file_name' => $new_file_name,
'move_to_folder'=>$app_url.$upload_folder_path,
'download_file_path'=>$app_url.$upload_folder_path.$new_file_name,
));
}
}
//--->upload group files > 1 > end
//--->upload group files > 2 > start
if(isset($_FILES['file_obj_2']))
{
$file_obj_2 = $_FILES['file_obj_2'];
foreach ($file_obj_2['name'] as $k1 => $v1)
{
$file_name = $v1;
$ext = pathinfo($file_name, PATHINFO_EXTENSION);
$new_file_name = 'file_obj_2_'. hash('crc32',uniqid()).'.'.$ext;
$fileDest = ABSPATH.$upload_folder_path.$new_file_name;
move_uploaded_file($file_obj_2['tmp_name'][$k1] ,$fileDest);
array_push($a2, array(
'old_file_name' => $v1,
'new_file_name' => $new_file_name,
'move_to_folder'=>$app_url.$upload_folder_path,
'download_file_path'=>$app_url.$upload_folder_path.$new_file_name,
));
}
}
//--->upload group files > 2 > end
echo json_encode(array(
'user_name'=>$user_name,
'user_email'=>$user_email,
'file_obj_0' => $a0,
'file_obj_1' => $a1,
'file_obj_2' => $a2,
));
}
?>