How can JavaScript and PHP be effectively integrated to handle file uploads and generate new file names?

To handle file uploads and generate new file names, JavaScript can be used to upload the file from the client-side to the server, and PHP can handle the file processing and renaming on the server-side. JavaScript can send the file to a PHP script using AJAX, and PHP can generate a unique file name using functions like uniqid() or timestamp. This integration allows for a seamless process of uploading files and ensuring each file has a unique name.

<?php
// Check if file has been uploaded
if(isset($_FILES['file'])){
    $file = $_FILES['file'];
    
    // Generate a unique file name
    $newFileName = uniqid() . '_' . $file['name'];
    
    // Move the uploaded file to a directory with the new file name
    move_uploaded_file($file['tmp_name'], 'uploads/' . $newFileName);
    
    echo "File uploaded successfully with new name: " . $newFileName;
} else {
    echo "No file uploaded";
}
?>