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 SQL防注入代码集合
Apr 25 PHP
phpMyAdmin 安装配置方法和问题解决
Jun 08 PHP
非常精妙的PHP递归调用与静态变量使用
Dec 16 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
Jan 11 PHP
php的memcache类分享(memcache队列)
Mar 26 PHP
php利用curl抓取新浪微博内容示例
Apr 27 PHP
PHP对称加密函数实现数据的加密解密
Oct 27 PHP
详解配置 Apache 服务器支持 PHP 文件的解析
Feb 15 PHP
php-fpm中max_children的配置
Mar 15 PHP
基于PHP实现微信小程序客服消息功能
Aug 12 PHP
laravel框架查询数据集转为数组的两种方法
Oct 10 PHP
PHP实现简单的计算器
Aug 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 变量类型的强制转换
2009/10/23 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
js中this对象用法分析
2018/01/05 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
利用es6 new.target来对模拟抽象类的方法
2019/05/10 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
Python3中使用PyMongo的方法详解
2017/07/28 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
python中实现将多个print输出合成一个数组
2018/04/19 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
Python logging模块用法示例
2018/08/28 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
python将字母转化为数字实例方法
2019/10/04 Python
python 实现list或string按指定分段
2019/12/25 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
css3的transition属性详解
2014/12/15 HTML / CSS
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
英文简历中的自我评价用语
2013/12/09 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
授权收款委托书范本
2014/10/10 职场文书
银行培训心得体会范文
2016/01/09 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
Python装饰器详细介绍
2022/03/25 Python