Upload an image from input to server using JQuery/Ajax

I have an Input like this:
<input type="file" accept="image/*">

Now I want to send the image to the server (I guess ajax is the way to go?)
From the Server I want to save the image to an aws-s3 storage (not actually my problem)
The question is how do I send the image to php in a way that I can later store it in an object storage?

Answer

This code was copied from the following web page: https://www.w3schools.com/PHP/php_file_upload.asp

Note that it’s much more harder to use AJAX/jQuery, so you can use this code.

First check your php.ini file (it’s in C:/php-install-path/php.ini) and search for the following line:

file_uploads = On

JavaScript
​x
 
file_uploads = On​

It may appear as

file_uploads = Off

JavaScript
 
file_uploads = Off​

so you need to turn in to On. Then restart your web server if it was off.

Next, create the form.

<!DOCTYPE html>
<html>
<body>

<form action="upload.php" method="post" enctype="multipart/form-data">
  Select image to upload:
  <input type="file" name="fileToUpload" id="fileToUpload">
  <input type="submit" value="Upload Image" name="submit">
</form>

</body>
</html>

JavaScript
 
<!DOCTYPE html><html><body>​<form action="upload.php" method="post" enctype="multipart/form-data">  Select image to upload:  <input type="file" name="fileToUpload" id="fileToUpload">  <input type="submit" value="Upload Image" name="submit"></form>​</body></html>​

It will need to redirect to a PHP file as PHP can receive elements.

For the PHP file, put code like this:

<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
  if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }
}

// Check if file already exists
if (file_exists($target_file)) {
  echo "Sorry, file already exists.";
  $uploadOk = 0;
}

// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
  echo "Sorry, your file is too large.";
  $uploadOk = 0;
}

// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
  $uploadOk = 0;
}

// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
  echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";
  } else {
    echo "Sorry, there was an error uploading your file.";
  }
}
?>

JavaScript
 
<?php$target_dir = "uploads/";$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);$uploadOk = 1;$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));​// Check if image file is a actual image or fake imageif(isset($_POST["submit"])) {  $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);  if($check !== false) {    echo "File is an image - " . $check["mime"] . ".";    $uploadOk = 1;  } else {    echo "File is not an image.";    $uploadOk = 0;  }}​// Check if file already existsif (file_exists($target_file)) {  echo "Sorry, file already exists.";  $uploadOk = 0;}​// Check file sizeif ($_FILES["fileToUpload"]["size"] > 500000) {  echo "Sorry, your file is too large.";  $uploadOk = 0;}​// Allow certain file formatsif($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"&& $imageFileType != "gif" ) {  echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";  $uploadOk = 0;}​// Check if $uploadOk is set to 0 by an errorif ($uploadOk == 0) {  echo "Sorry, your file was not uploaded.";// if everything is ok, try to upload file} else {  if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {    echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been uploaded.";  } else {    echo "Sorry, there was an error uploading your file.";  }}?>​

Bonus: If you want to create a function for this, you can.

<?php
function uploadFile($names, $button) {
  $file = $_FILES[$names];
  $target_dir = "uploads/";
  $target_file = $target_dir . basename($file["name"]);
  $uploadOk = 1;
  $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

  // Check if image file is a actual image or fake image
  if(!empty($button)) {
    $check = getimagesize($file["fileToUpload"]["tmp_name"]);
    if($check !== false) {
    echo "File is an image - " . $check["mime"] . ".";
    $uploadOk = 1;
  } else {
    echo "File is not an image.";
    $uploadOk = 0;
  }

  // Check if file already exists
  if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
  }

  // Check file size
  if ($_FILES["fileToUpload"]["size"] > 500000) {
    echo "Sorry, your file is too large.";
    $uploadOk = 0;
  }

  // Allow certain file formats
  if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
  }

  // Check if $uploadOk is set to 0 by an error
  if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
  // if everything is ok, try to upload file
  } else {
    if (move_uploaded_file($file["fileToUpload"]["tmp_name"], $target_file)) {
      echo "The file ". htmlspecialchars( basename( $file["fileToUpload"] ["name"])). " has been uploaded.";
    } else {
      echo "Sorry, there was an error uploading your file.";
    }
  }
}
?>

JavaScript
 
<?phpfunction uploadFile($names, $button) {  $file = $_FILES[$names];  $target_dir = "uploads/";  $target_file = $target_dir . basename($file["name"]);  $uploadOk = 1;  $imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));​  // Check if image file is a actual image or fake image  if(!empty($button)) {    $check = getimagesize($file["fileToUpload"]["tmp_name"]);    if($check !== false) {    echo "File is an image - " . $check["mime"] . ".";    $uploadOk = 1;  } else {    echo "File is not an image.";    $uploadOk = 0;  }​  // Check if file already exists  if (file_exists($target_file)) {    echo "Sorry, file already exists.";    $uploadOk = 0;  }​  // Check file size  if ($_FILES["fileToUpload"]["size"] > 500000) {    echo "Sorry, your file is too large.";    $uploadOk = 0;  }​  // Allow certain file formats  if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"&& $imageFileType != "gif" ) {    echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";    $uploadOk = 0;  }​  // Check if $uploadOk is set to 0 by an error  if ($uploadOk == 0) {    echo "Sorry, your file was not uploaded.";  // if everything is ok, try to upload file  } else {    if (move_uploaded_file($file["fileToUpload"]["tmp_name"], $target_file)) {      echo "The file ". htmlspecialchars( basename( $file["fileToUpload"] ["name"])). " has been uploaded.";    } else {      echo "Sorry, there was an error uploading your file.";    }  }}?>​

Then include or require the file in the PHP file that’s receiving the file upload.

<?php
include_once("file_upload_fn.php");
uploadFile("fileToUpload", $_POST['submit']);
?>

JavaScript
 
<?phpinclude_once("file_upload_fn.php");uploadFile("fileToUpload", $_POST['submit']);?>​

There you go. That’s how you use PHP to upload an image.

Advertisement

Answer