How to upload file using Ajax and php

Let me guide you through adding AJAX file upload functionality to your website. For this purpose, you'll need to use JavaScript to handle the AJAX request and interact with the server. In this example, I'll show you how to implement a basic file upload using AJAX and PHP on the server side.

HTML File (index.html): Create an HTML form with a file input and a button to trigger the upload process. Add a '<div>' to display the upload status.

<!DOCTYPE html>
<html>
<head>
    <title>File Upload Example</title>
</head>
<body>
    <h1>File Upload Example</h1>
    <form id="upload-form">
        <input type="file" id="file-input" name="file">
        <button type="button" id="upload-button">Upload</button>
    </form>
    <div id="upload-status"></div>

    <script src="upload.js"></script>
</body>
</html>

2. JavaScript File (upload.js): Create a JavaScript file to handle the AJAX request when the "Upload" button is clicked.

document.addEventListener("DOMContentLoaded", function () {
    const uploadButton = document.getElementById("upload-button");
    const fileInput = document.getElementById("file-input");
    const uploadStatus = document.getElementById("upload-status");

    uploadButton.addEventListener("click", function () {
        const file = fileInput.files[0];
        if (file) {
            const formData = new FormData();
            formData.append("file", file);

            const xhr = new XMLHttpRequest();
            xhr.open("POST", "upload.php", true);
            
            xhr.upload.onprogress = function (e) {
                if (e.lengthComputable) {
                    const percentComplete = (e.loaded / e.total) * 100;
                    uploadStatus.innerHTML = `Uploading: ${percentComplete.toFixed(2)}%`;
                }
            };

            xhr.onload = function () {
                if (xhr.status === 200) {
                    uploadStatus.innerHTML = "Upload complete!";
                } else {
                    uploadStatus.innerHTML = "Upload failed.";
                }
            };

            xhr.send(formData);
        } else {
            uploadStatus.innerHTML = "Please select a file.";
        }
    });
});

3. PHP File (upload.php): Create a PHP file on the server to handle the uploaded file.

<?php
if ($_FILES["file"]["error"] === UPLOAD_ERR_OK) {
    $targetDir = "uploads/";
    $targetFile = $targetDir . basename($_FILES["file"]["name"]);
    move_uploaded_file($_FILES["file"]["tmp_name"], $targetFile);
    echo "File uploaded successfully.";
} else {
    echo "Upload failed.";
}
?>

Remember to create a folder named "uploads" in the same directory as your PHP file to store the uploaded files.

In this example, when a file is selected and the "Upload" button is clicked, the JavaScript code makes an AJAX POST request to the 'upload.php' file on the server. The PHP script handles the file upload and responds with a success or failure message. Need professional developer help

Please note that this is a basic example and doesn't include thorough error handling or security measures. In a production environment, you should consider adding more robust error handling, validation, and security checks.

Codding Guide and Tutorials

Search This Blog

How to upload file using Ajax and php

Labels

Comments

Post a Comment

Popular posts from this blog

How to create sticky header using css and html

Steps to increase organic traffic

How do I make an HTTP request in Javascript?