《PHP学习：PHP Ajax实现无刷新附件上传》要点：
本文介绍了PHP学习：PHP Ajax实现无刷新附件上传，希望对您有用。如果有疑问，可以联系我们。
对一个网站而言,有一个基本的不可缺少的功能,那就是文件上传.使用PHP预压来实现文件上传可谓是有得天独厚的优势的,那么今天,就一起来做一个关于无刷新实现的文件上传吧.PHP学习
--------------------------------------------------------------------------------PHP学习
普通表单PHP学习
前端页面PHP学习
<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>
后台处理PHP学习
print_r($_POST); $username = $_POSY['username']; $password = $_POST['password']; $email = $_POST['email']; // 在服务器上和数据库内容信息对比即可,实现相关的业务逻辑.
・・・PHP学习
带有文件的表单PHP学习
带有文件的表单和普通表单是有很大的区别的,首先我们要在表单上声明一个属性,如下：PHP学习
<form enctype='multipart/form-data'>PHP学习
来告诉服务器,我们上传的表单包含有文件信息.PHP学习
刷新方式PHP学习
谈到刷新模式,也就是点击完submit之后,页面跳转到业务处理界面.这也是我们普通方式实现的表单的数据提交.PHP学习
前端界面PHP学习
<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学习
后台处理除了普通的表单数据之外,最重要的是处理文件信息.PHP内置了一个函数,可以方便的把上传过来的文件从临时的数据区转移到我们的目标文件夹,实现上传的业务逻辑.PHP学习
move_uploaded_file('临时文件路径','目标文件路径');PHP学习
无刷新方式PHP学习
使用无刷新方式,与使用刷新方式的唯一的区别就是阻止了页面的跳转,我们通常会有两种方式来实现.
•在表单提交事件的末尾加上return false.
PHP学习
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(){
// to do something
・・・
// 阻止页面跳转
return false;
}
</script>
•使用h5相关方式.
PHP学习
<script>
var form = document.getElementsByTagName('form')[0];
form.onsubmit = function(event){
// to do something
・・・
// 阻止页面跳转
event.preventDefault();
}
</script>
其他的操作处理与带跳转的保持一致即可.PHP学习
大文件上传PHP学习
虽然PHP实现其文件上传很方便,也很快速.但是上传文件的大小并不是无限制的.默认来说,有两个因素会限制我们上传文件的大小.
•post的极值
•upload的极值
我们可以通过手动的更改php.ini配置信息来实现上传文件大小的控制. PHP学习
POST极值PHP学习
post_max_size = 200MPHP学习
upload极值PHP学习
upload_max_filesize=200MPHP学习
上传细节PHP学习
ajax对象有一个叫upload的属性,而且upload也作为一个对象而存在.其拥有一个叫onprogress的方法,我们可以通过监测这个方法,来查看文件上传过程中的百分比.PHP学习
前端页面PHP学习
<!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>
<div id="parent">
<div id="son">
<progress id="progress">
</div>
</div>
<input type="submit" value="Register" />
</form>
</body>
</html>
后台处理PHP学习
<?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'];
}
?>
记得保证upload文件夹的存在性以及路径问题.
PHP学习
总结PHP学习
文件上传是一个很基础的功能,实现起来也不是很复杂.但是这个功能却又是那么的重要,我们可以方便的通过文件上传来配合修改用户的诸如头像,以及其他文件信息.
PHP学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持维易PHP.PHP学习
转载请注明本页网址：
http://www.vephp.com/jiaocheng/4769.html
