PHP Ajax实现无刷新附件上传

更新时间：2016年08月17日 11:30:23 作者：Marksinoberg

这篇文章为大家详细主要介绍了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'];

// 在服务器上和数据库内容信息对比即可，实现相关的业务逻辑。

···

带有文件的表单

带有文件的表单和普通表单是有很大的区别的，首先我们要在表单上声明一个属性，如下：

来告诉服务器，我们上传的表单包含有文件信息。

刷新方式

谈到刷新模式，也就是点击完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>

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

大文件上传

虽然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>
<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
//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时间戳相关函数time,mktime,date及strtotime的使用方法,非常简单实用,需要的朋友可以参考下
2016-05-05
php实现留言板功能（代码详解）
本文主要介绍了php实现留言板功能的步骤方法解析。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
php define的第二个参数使用方法
今天阅读php源码，发现define的第二个参数其实也可以是一个对象，我们来看看如何使用。
2013-11-11
php链式操作的实现方式分析
这篇文章主要介绍了php链式操作的实现方式,结合实例形式对比分析了常规调用与链式调用操作的相关实现技巧与操作注意事项,需要的朋友可以参考下
2019-08-08
php 基础函数
本文主要介绍了php的基础函数。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
memcached 和 mysql 主从环境下php开发代码详解
一般的大站通常做法是拿着内存当数据库来用(memcached). 和很好的读写分离备份机制 (mysql 的主从) 在这样的环境下我们怎么进行PHP开发呢。
2010-05-05
PHP获取毫秒级时间戳的方法
这篇文章主要介绍了PHP获取毫秒级时间戳的方法,涉及php针对microtime函数返回结果的处理技巧,非常简单实用,需要的朋友可以参考下
2015-04-04
php获取post中的json数据的实现方法
最近用到ext与PHP交互，ext把json数据post给PHP，但在PHP里面$_post获取不到，$_REQUEST也获取不到，但是通过firedebug看到的请求信息确实是把JSON数据post给了PHP，这什么情况
2011-06-06
zen cart新进商品的随机排序修改方法
由于新进商品的数量可能比页面上能显示的数量多，所以采用的是随机显示的方式。如果想改为按时间顺序显示，可以按照radnows提供的方法修改。(记住使用文件替代)
2010-09-09
php中rename函数用法分析
这篇文章主要介绍了php中rename()函数用法,较为详细的分析了rename()函数中参数的含义及具体的使用方法,具有一定的参考借鉴价值,需要的朋友可以参考下
2014-11-11

PHP Ajax实现无刷新附件上传

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具