PHP Ajax实现无刷新附件上传


Posted in PHP onAugust 17, 2016

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

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

大文件上传

虽然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 相关文章推荐
用户的详细注册和判断
Oct 09 PHP
windows xp下安装pear
Dec 02 PHP
CodeIgniter中实现泛域名解析
Jul 19 PHP
php截取中文字符串函数实例
Feb 23 PHP
php简单实现快速排序的方法
Apr 04 PHP
php计算title标题相似比的方法
Jul 29 PHP
基于PHP实现假装商品限时抢购繁忙的效果
Oct 16 PHP
PHP读取文件内容的五种方式
Dec 28 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
Mar 19 PHP
PHP 实现页面静态化的几种方法
Jul 23 PHP
浅谈PHP中pack、unpack的详细用法
Mar 12 PHP
phpStorm2020 注册码
Sep 17 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
Aug 17 #PHP
全面解析PHP验证码的实现原理 附php验证码小案例
Aug 17 #PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
Aug 17 #PHP
总结PHP中数值计算的注意事项
Aug 14 #PHP
示例详解Laravel的注册重构
Aug 14 #PHP
PHP实现路由映射到指定控制器
Aug 13 #PHP
Yii2.0中的COOKIE和SESSION用法
Aug 12 #PHP
You might like
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
Python函数装饰器实现方法详解
2018/12/22 Python
Python多继承以及MRO顺序的使用
2019/11/11 Python
python类中super() 的使用解析
2019/12/19 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
装饰资料员岗位职责
2013/12/30 职场文书
开学典礼决心书
2014/03/11 职场文书
和谐社区口号
2014/06/19 职场文书
项目工作说明书
2014/07/29 职场文书
生活部的活动方案
2014/08/19 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
高三物理教学反思
2016/02/20 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书