php ajax implements file upload progress bar, _PHP tutorial
php ajax implements the file upload progress bar,
This example is about the implementation of the progress bar when php files are uploaded, mainly using ajax technology, and also using html5, if necessary Friends can do some research.
This example has two files:
upload_form.html：
<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2 id="HTML-File-Upload-Progress-Bar-Tutorial">HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</body>
</html>
file_upload_parser.php:
<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
echo "$fileName upload is complete";
} else {
echo "move_uploaded_file function failed";
}
?>
The above is the entire content of this article, I hope it will be helpful to everyone’s study.
Articles you may be interested in:
- jQuery Ajax file upload (php)
- ajax php build progress bar readyState various states
- ajax php build progress Code [readyState description of each status]
- File, FileReader and Ajax file upload example analysis (php)
- Code example of how to implement asynchronous file upload through Ajax in php
- php ajax implementation of big data queuing export ideas with progress bar and source code
- php ajax implementation of image file upload function example
- ThinkPHP combined with AjaxFileUploader to achieve refresh-free file upload method
- Ajax_upload upload progress bar code implemented by PHP apc ajax
How do you create and use an interface in PHP?Apr 30, 2025 pm 03:40 PMThe article explains how to create, implement, and use interfaces in PHP, focusing on their benefits for code organization and maintainability.
What is the difference between crypt() and password_hash()?Apr 30, 2025 pm 03:39 PMThe article discusses the differences between crypt() and password_hash() in PHP for password hashing, focusing on their implementation, security, and suitability for modern web applications.
How can you prevent Cross-Site Scripting (XSS) in PHP?Apr 30, 2025 pm 03:38 PMArticle discusses preventing Cross-Site Scripting (XSS) in PHP through input validation, output encoding, and using tools like OWASP ESAPI and HTML Purifier.
What is autoloading in PHP?Apr 30, 2025 pm 03:37 PMAutoloading in PHP automatically loads class files when needed, improving performance by reducing memory use and enhancing code organization. Best practices include using PSR-4 and organizing code effectively.
What are PHP streams?Apr 30, 2025 pm 03:36 PMPHP streams unify handling of resources like files, network sockets, and compression formats via a consistent API, abstracting complexity and enhancing code flexibility and efficiency.
What is the maximum size of a file that can be uploaded using PHP ?Apr 30, 2025 pm 03:35 PMThe article discusses managing file upload sizes in PHP, focusing on the default limit of 2MB and how to increase it by modifying php.ini settings.
What is Nullable types in PHP ?Apr 30, 2025 pm 03:34 PMThe article discusses nullable types in PHP, introduced in PHP 7.1, allowing variables or parameters to be either a specified type or null. It highlights benefits like improved readability, type safety, and explicit intent, and explains how to declar
What is the difference between the unset() and unlink() functions ?Apr 30, 2025 pm 03:33 PMThe article discusses the differences between unset() and unlink() functions in programming, focusing on their purposes and use cases. Unset() removes variables from memory, while unlink() deletes files from the filesystem. Both are crucial for effec
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Chinese version
Chinese version, very easy to use
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function
