• Techblog369, India
  • September 29, 2022

How to create PHP QR code and Save it to Database?

Hi In this Article I am going to show how to create QR code and save it to database also fetch QR Code in a Table Create a Page addqrcode.php in …

How to Send Multiple Files Attachment Mail using Laravel

Hi in this article i am going to show how to send multiple files attachment mail in Laravel. It’s simple example of Laravel send multiple attachment in mail. I explained simply …

The following HTML5 tags provide the required components to add a file selector and an upload button to any web page:

<input id="fileupload" type="file" name="fileupload" />
<button id="upload-button" onclick="uploadFile()"> Upload </button>

The button kicks off a method named uploadFile(), which contains the JavaScript file upload logic.

<script>
async function uploadFile() {
    let formData = new FormData();           
    formData.append("file", fileupload.files[0]);
    await fetch('/upload.php', {
      method: "POST", 
      body: formData
    });    
    alert('The file has been uploaded successfully.');
}
</script>

JavaScript file upload logic

The above script tag contains nothing but pure JavaScript. There’s no jQuery or Dojo thrown into the mix and the logic is straightforward:

  • Create a FormData object to contain the information to be sent to the server;
  • Add the chosen file to be uploaded to the FormData object;
  • Asynchronously call server-side resource to handle the upload; and
    • The server-side resource is invoked through the POST method
    • The server-side resource is passed the FormData which contains the file
    • In this example that server-side resource is named upload.php
  • When notified that the JavaScript file upload was successful, send an Ajax based alert to the client.

All the HTML and JavaScript logic will be contained in a single file named uploader.html. The complete HTML looks as follows:

<!DOCTYPE html> 
<html> 
 <head> 
  <title> Ajax JavaScript File Upload Example </title> 
 </head> 
 <body>
  <!-- HTML5 Input Form Elements -->
  <input id="fileupload" type="file" name="fileupload" /> 
  <button id="upload-button" onclick="uploadFile()"> Upload </button>

  <!-- Ajax JavaScript File Upload Logic -->
  <script>
  async function uploadFile() {
  let formData = new FormData(); 
  formData.append("file", fileupload.files[0]);
  await fetch('/upload.php', {
    method: "POST", 
    body: formData
  }); 
  alert('The file has been uploaded successfully.');
  }
  </script>

 </body> 
</html>

Apache file upload processing

When an asynchronous JavaScript file upload happens, a server-side component must exist to handle the incoming file and store it.it requires a file named upload.php that contains a small PHP script to save the incoming file to a folder named uploads:

<?php

/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];

/* Choose where to save the uploaded file */
$location = "upload/".$filename;

/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
  echo 'Success'; 
} else { 
  echo 'Failure'; 
}

?>

The PHP script is also straightforward. It obtains the name of the file being uploaded, and then creates a spot in a folder named upload to save the file. PHP’s move_uploaded_file method is then used to save the uploaded file to this new location.

Run the JavaScript file upload example

The files used in this example, along with a folder named upload, must be added to the htdocs folder of AHS. When a client accesses the uploader.html file through a browser, the client will be able to upload a file to the server using Ajax and pure JavaScript.

Author

admin@techblog369.in

Leave a Reply

Your email address will not be published.