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 相关文章推荐
用PHP4访问Oracle815
Oct 09 PHP
php缓存技术介绍
Nov 25 PHP
php学习笔记 PHP面向对象的程序设计
Jun 13 PHP
php 缩略图实现函数代码
Jun 23 PHP
php 批量替换程序的具体实现代码
Oct 04 PHP
php中{}大括号是什么意思
Dec 01 PHP
PHP使用GIFEncoder类处理gif图片实例
Jul 01 PHP
php检查是否是ajax请求的方法
Apr 16 PHP
php实现贪吃蛇小游戏
Jul 26 PHP
AES加解密在php接口请求过程中的应用示例
Oct 26 PHP
PHP命名空间简单用法示例
Dec 28 PHP
php use和include区别总结
Oct 13 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 cli换行示例
2014/04/22 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
thinkphp获取栏目和文章当前位置的方法
2014/10/29 PHP
PHP 断点续传实例详解
2017/11/11 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
Dojo 学习要点
2010/09/03 Javascript
解析window.open的使用方法总结
2013/06/19 Javascript
讲解JavaScript中for...in语句的使用方法
2015/06/03 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
基于jQuery实现以手风琴方式展开和折叠导航菜单
2016/01/28 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
vue内置指令详解
2018/04/03 Javascript
Vue全局loading及错误提示的思路与实现
2019/08/09 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python的常用模块之collections模块详解
2018/12/06 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python中有函数重载吗
2020/05/28 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
四查四看整改措施
2014/09/19 职场文书
工作检讨书范文
2015/01/23 职场文书
工资证明格式模板
2015/06/12 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
Python机器学习之底层实现KNN
2021/06/20 Python