How to upload attachments without refreshing using PHP Ajax
This article mainly introduces the specific code of PHP Ajax to implement the function of uploading attachments without refreshing. It has certain reference value. Interested friends can refer to it.
For a website , there is a basic and indispensable function, which is file upload. Using PHP precompression to achieve file upload has unique advantages, so today, let’s do a file upload without refreshing.
-------------------------------------------------- ------------------------------------
Normal form
Front-end page
<form action="./fileupload.php" method="POST"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <input type="submit" value="Register" /> </form>
Backend processing
print_r($_POST); $username = $_POSY['username']; $password = $_POST['password']; $email = $_POST['email']; // 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。
···
Form with file
Form with file and normal form There is a big difference. First we have to declare an attribute on the form, as follows:
To tell the server that the form we uploaded contains file information.
Refresh method
Speaking of refresh mode, that is, after clicking submit, the page jumps to the business processing interface. This is also the data submission of the form that we implement in a normal way.
Front-end interface
<form action="./fileupload.php" enctype="multipart/form-data" method="post"> <p>Username<input type="text" name="username" /></p> <p>Password<input type="password" name="password" /></p> <p>E-mail<input type="text" name="email" /></p> <p>Photo<input type="file" name="photo" /></p> <input type="submit" value="Register" />
Backend page
In addition to ordinary form data, the most important thing in background processing is to process file information. PHP has a built-in function that can easily transfer uploaded files from the temporary data area to our target folder to implement the upload business logic.
move_uploaded_file('temporary file path','target file path');
No refresh method
Using no refresh method is different from using refresh The only difference in the method is to prevent the page from jumping. We usually have two ways to achieve this.
•Add return false at the end of the form submission event.
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
···
// 阻止页面跳转
return false;
}
</script> •Use h5 related methods.
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
···
// 阻止页面跳转
event.preventDefault();
}
</script>Other operation processing can be consistent with the one with jump.
Large file upload
Although PHP implements its file upload, it is very convenient and fast. But the size of uploaded files is not unlimited. By default, there are two factors that limit the size of the files we upload.
•The extreme value of post
•The extreme value of upload
We can control the upload file size by manually changing the php.ini configuration information.
POST extreme value
post_max_size = 200M
upload extreme value
upload_max_filesize=200M
Upload details
The ajax object has an attribute called upload, and upload also exists as an object. It has a method called onprogress. We can monitor this method to see the percentage of the file upload process.
Front-end page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文件上传示例</title>
<script>
window.onload = function(){
var form = document.getElementsByTagName("form")[0];
form.onsubmit = function(evt){
// 收集表单信息
var fd = new FormData(form);
var ajax = new XMLHttpRequest();
// 给Ajax设置文件上传的感知事件
ajax.upload.onprogress = function(evt){
var loaded = evt.loaded;
var total = evt.total;
document.getElementById("progress").value =(loaded/total)*100;
}
ajax.onreadystatechange = function() {
if(ajax.readyState==4){
alert(ajax.responseText);
}
}
ajax.open('post','./fileupload.php');
ajax.send(fd);
// 阻止浏览器的跳转
evt.preventDefault();
//return false;
}
}
</script>
</head>
<body>
<h2>无刷新方式上传附件</h2>
<form action="./fileupload.php">
<p>Username<input type="text" name="username" /></p>
<p>Password<input type="password" name="password" /></p>
<p>E-mail<input type="text" name="email" /></p>
<p>Photo<input type="file" name="photo" /></p>
<!--设置进度条-->
<style>
#parent {width:300px;height:34px;border:1px solid #033;}
#son {width:100%;height:10%;background-color:green}
progress {width:100%;height:34px;}
</style>
<p id="parent">
<p id="son">
<progress id="progress">
</p>
</p>
<input type="submit" value="Register" />
</form>
</body>
</html>Backend processing
<?php
//print_r($_POST);
//echo "---------------------"."<BR>";
//print_r($_FILES);
// 附件的存储位置、附件的名字，记得一定要存在upload文件夹
$path = "../upload/";
// 获取文件的原始名称
$origin_name = $_FILES['photo']['name'];
// 拼接成该文件在服务器上的名称
$server_name = $path.$origin_name;
if($_FILES['photo']['error']>0) {
die("出错了！".$_FILES['photo']['error']);
}
if(move_uploaded_file($_FILES['photo']['tmp_name'],$server_name)){
echo "<BR>"."Upload Success!";
}else{
echo "<BR>"."Upload Failed!".$_FILES['photo']['error'];
}
?>Remember to ensure The existence and path of the upload folder are problematic.
Summary
File uploading is a very basic function, and it is not very complicated to implement. But this function is so important. We can easily modify the user's avatar and other file information through file upload.
The above is the entire content of this article, I hope it will be helpful to everyone's study.
Related recommendations:
PHP realizes multi-image upload combined with uploadify plug-in idea analysis
PHP realizes acquisition How to specify the day of the week for a date
The above is the detailed content of How to upload attachments without refreshing using PHP Ajax. For more information, please follow other related articles on the PHP Chinese website!
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
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati
7 PHP Functions I Regret I Didn't Know Before
Nov 13, 2024 am 09:42 AM
If you are an experienced PHP developer, you might have the feeling that you’ve been there and done that already.You have developed a significant number of applications, debugged millions of lines of code, and tweaked a bunch of scripts to achieve op
How To Set Up Visual Studio Code (VS Code) for PHP Development
Dec 20, 2024 am 11:31 AM
Visual Studio Code, also known as VS Code, is a free source code editor — or integrated development environment (IDE) — available for all major operating systems. With a large collection of extensions for many programming languages, VS Code can be c
Explain JSON Web Tokens (JWT) and their use case in PHP APIs.
Apr 05, 2025 am 12:04 AM
JWT is an open standard based on JSON, used to securely transmit information between parties, mainly for identity authentication and information exchange. 1. JWT consists of three parts: Header, Payload and Signature. 2. The working principle of JWT includes three steps: generating JWT, verifying JWT and parsing Payload. 3. When using JWT for authentication in PHP, JWT can be generated and verified, and user role and permission information can be included in advanced usage. 4. Common errors include signature verification failure, token expiration, and payload oversized. Debugging skills include using debugging tools and logging. 5. Performance optimization and best practices include using appropriate signature algorithms, setting validity periods reasonably,
PHP Program to Count Vowels in a String
Feb 07, 2025 pm 12:12 PM
A string is a sequence of characters, including letters, numbers, and symbols. This tutorial will learn how to calculate the number of vowels in a given string in PHP using different methods. The vowels in English are a, e, i, o, u, and they can be uppercase or lowercase. What is a vowel? Vowels are alphabetic characters that represent a specific pronunciation. There are five vowels in English, including uppercase and lowercase: a, e, i, o, u Example 1 Input: String = "Tutorialspoint" Output: 6 explain The vowels in the string "Tutorialspoint" are u, o, i, a, o, i. There are 6 yuan in total
How do you parse and process HTML/XML in PHP?
Feb 07, 2025 am 11:57 AM
This tutorial demonstrates how to efficiently process XML documents using PHP. XML (eXtensible Markup Language) is a versatile text-based markup language designed for both human readability and machine parsing. It's commonly used for data storage an
Explain late static binding in PHP (static::).
Apr 03, 2025 am 12:04 AM
Static binding (static::) implements late static binding (LSB) in PHP, allowing calling classes to be referenced in static contexts rather than defining classes. 1) The parsing process is performed at runtime, 2) Look up the call class in the inheritance relationship, 3) It may bring performance overhead.
What are PHP magic methods (__construct, __destruct, __call, __get, __set, etc.) and provide use cases?
Apr 03, 2025 am 12:03 AM
What are the magic methods of PHP? PHP's magic methods include: 1.\_\_construct, used to initialize objects; 2.\_\_destruct, used to clean up resources; 3.\_\_call, handle non-existent method calls; 4.\_\_get, implement dynamic attribute access; 5.\_\_set, implement dynamic attribute settings. These methods are automatically called in certain situations, improving code flexibility and efficiency.
