File "code.html"

Full Path: /home/analogde/www/Prog/File explorer/upload04/code.html
File size: 5.14 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width,minimum-scale=1">
		<title>Upload Form</title>
		
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer">
	</head>


<style>
    * {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  font-size: 16px;
}
body {
  margin: 0;
  padding: 15px;
  background-color: #63a7df;
}
.upload-form {
  display: flex;
  max-width: 350px;
  padding: 20px;
  flex-flow: column;
  margin: 100px auto 15px auto;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
}
.upload-form h1 {
  margin: 0;
  padding: 15px;
  font-size: 18px;
  font-weight: 500;
  color: #434850;
  text-align: center;
}
.upload-form label {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background-color: #fafbfb;
  border: 1px solid #e6e8ec;
  color: #737476;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 14px;
  margin: 10px 0;
  border-radius: 4px;
  cursor: pointer;
}
.upload-form label i {
  margin-right: 10px;
  padding: 5px 0;
  color: #dbdce0;
}
.upload-form label span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  word-break: break-all;
}
.upload-form label:hover {
  background-color: #f7f8f9;
  border: 1px solid #e3e5ea;
  color: #68686a;
}
.upload-form label:hover i {
  color: #cfd1d4;
}
.upload-form input[type="file"] {
  appearance: none;
  visibility: hidden;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
}
.upload-form .progress {
  height: 20px;
  border-radius: 4px;
  margin: 10px 0;
  background-color: #e6e8ec;
}
.upload-form button {
  appearance: none;
  background-color: #be5a41;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  border: 0;
  padding: 10px 12px;
  margin-top: 10px;
  color: #fff;
  cursor: pointer;
}
.upload-form button:hover {
  background-color: #b6563e;
}
.upload-form button:disabled {
  background-color: #aca7a5;
}
.upload-form .result {
  padding-top: 15px;
}
</style>

    <script>
        // Declare global variables for easy access 
        const uploadForm = document.querySelector('.upload-form');
        const filesInput = uploadForm.querySelector('#files');

        filesInput.onchange = () => {
    // Append all the file names to the label
    uploadForm.querySelector('label').innerHTML = '';
    for (let i = 0; i < filesInput.files.length; i++) {
        uploadForm.querySelector('label').innerHTML += '<span><i class="fa-solid fa-file"></i>' + filesInput.files[i].name + '</span>';
    }
};

// Attach submit event handler to form
uploadForm.onsubmit = event => {
    event.preventDefault();
    // Make sure files are selected
    if (!filesInput.files.length) {
        uploadForm.querySelector('.result').innerHTML = 'Please select a file!';
    } else {
        // Create the form object
        let uploadFormDate = new FormData(uploadForm);
        // Initiate the AJAX request
        let request = new XMLHttpRequest();
        // Ensure the request method is POST
        request.open('POST', uploadForm.action);
        // Attach the progress event handler to the AJAX request
        request.upload.addEventListener('progress', event => {
            // Add the current progress to the button
            uploadForm.querySelector('button').innerHTML = 'Uploading... ' + '(' + ((event.loaded/event.total)*100).toFixed(2) + '%)';
            // Update the progress bar
            uploadForm.querySelector('.progress').style.background = 'linear-gradient(to right, #25b350, #25b350 ' + Math.round((event.loaded/event.total)*100) + '%, #e6e8ec ' + Math.round((event.loaded/event.total)*100) + '%)';
            // Disable the submit button
            uploadForm.querySelector('button').disabled = true;
        });
        // The following code will execute when the request is complete
        request.onreadystatechange = () => {
            if (request.readyState == 4 && request.status == 200) {
                // Output the response message
                uploadForm.querySelector('.result').innerHTML = request.responseText;
            }
        };
        // Execute request
        request.send(uploadFormDate);
    }
};

    </script>

	<body>
        <form class="upload-form" action="upload.php" method="post" enctype="multipart/form-data">
            
            <h1>Upload Form</h1>

            <label for="files"><i class="fa-solid fa-folder-open fa-2x"></i>Select files ...</label>
            <input id="files" type="file" name="files[]" multiple>

            <div class="progress"></div>

            <button type="submit">Upload</button>

            <div class="result"></div>

        </form>
    </body>
</html>