PHP Ajax实现无刷新附件上传

对一个网站而言，有一个基本的不可缺少的功能，那就是文件上传。使用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>

后台处理

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>

 •使用h5相关方式。

<script>var form = document.getElementsByTagName('form')[0];form.onsubmit = function(event){  // to do something  ···  // 阻止页面跳转  event.preventDefault();}</script>

其他的操作处理与带跳转的保持一致即可。