Home > Article > Backend Development > How to upload attachments without refreshing using PHP Ajax
How to upload attachments without refreshing using PHP Ajax
- 墨辰丷Original
- 2018-06-01 15:22:431355browse
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:
702865191b61c97523db8fc12c31cb75
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!