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 相关文章推荐
php 页面执行时间计算代码
Dec 04 PHP
深入php常用函数的使用汇总
Jun 08 PHP
解析centos中Apache、php、mysql 默认安装路径
Jun 25 PHP
php 生成自动创建文件夹并上传文件的示例代码
Mar 07 PHP
PHP模块memcached使用指南
Dec 08 PHP
php+ajax 实现输入读取数据库显示匹配信息
Oct 08 PHP
php实现zip文件解压操作
Nov 03 PHP
php 二维数组时间排序实现代码
Nov 19 PHP
PHP编程实现的TCP服务端和客户端功能示例
Apr 13 PHP
PHP7.1实现的AES与RSA加密操作示例
Jun 15 PHP
PHP按一定比例压缩图片的方法
Oct 12 PHP
实例讲解PHP验证邮箱是否合格
Jan 28 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中static静态变量的使用方法详解
2010/06/04 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
php获取访问者IP地址汇总
2015/04/24 PHP
JS控件的生命周期介绍
2012/10/22 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
JavaScript获取当前url路径过程解析
2019/12/27 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
在Python中使用判断语句和循环的教程
2015/04/25 Python
python使用str &amp; repr转换字符串
2016/10/13 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
大专学生推荐信范文
2013/11/19 职场文书
导游个人求职信
2014/04/25 职场文书
《少年王勃》教学反思
2014/04/27 职场文书
国防教育标语
2014/10/08 职场文书
2014年政工师工作总结
2014/12/18 职场文书
《观潮》教学反思
2016/02/17 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android