您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
今天就跟大家聊聊有关怎么在PHP中利用Ajax实现一个无刷新附件上传功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
前端页面
<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>
后台处理
print_r($_POST); $username = $_POSY['username']; $password = $_POST['password']; $email = $_POST['email']; // 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。
···
带有文件的表单
带有文件的表单和普通表单是有很大的区别的，首先我们要在表单上声明一个属性，如下：
<form enctype='multipart/form-data'>
来告诉服务器，我们上传的表单包含有文件信息。
刷新方式
谈到刷新模式，也就是点击完submit之后，页面跳转到业务处理界面。这也是我们普通方式实现的表单的数据提交。
前端界面
<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" />
后台页面
后台处理除了普通的表单数据之外，最重要的是处理文件信息。PHP内置了一个函数，可以方便的把上传过来的文件从临时的数据区转移到我们的目标文件夹，实现上传的业务逻辑。
move_uploaded_file('临时文件路径','目标文件路径');
无刷新方式
使用无刷新方式，与使用刷新方式的唯一的区别就是阻止了页面的跳转，我们通常会有两种方式来实现。
•在表单提交事件的末尾加上return false。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
···
// 阻止页面跳转
return false;
}
</script> •使用h6相关方式。
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
···
// 阻止页面跳转
event.preventDefault();
}
</script>其他的操作处理与带跳转的保持一致即可。
大文件上传
虽然PHP实现其文件上传很方便，也很快速。但是上传文件的大小并不是无限制的。默认来说，有两个因素会限制我们上传文件的大小。
•post的极值
•upload的极值
我们可以通过手动的更改php.ini配置信息来实现上传文件大小的控制。
POST极值
post_max_size = 200M
upload极值
upload_max_filesize=200M
上传细节
ajax对象有一个叫upload的属性，而且upload也作为一个对象而存在。其拥有一个叫onprogress的方法，我们可以通过监测这个方法，来查看文件上传过程中的百分比。
前端页面
<!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>
<h3>无刷新方式上传附件</h3>
<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>
<div id="parent">
<div id="son">
<progress id="progress">
</div>
</div>
<input type="submit" value="Register" />
</form>
</body>
</html>后台处理
<?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'];
}
?>看完上述内容，你们对怎么在PHP中利用Ajax实现一个无刷新附件上传功能有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。