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连mysql和oracle数据库性能比较
Oct 09 PHP
让你同时上传 1000 个文件 (一)
Oct 09 PHP
php出现Cannot modify header information问题的解决方法大全
Apr 09 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
Jan 15 PHP
最新版本PHP 7 vs HHVM 多角度比较
Feb 14 PHP
YII动态模型(动态表名)支持分析
Mar 29 PHP
简述php环境搭建与配置
Dec 05 PHP
PHP 配置后台登录以及模板引入
Jan 24 PHP
PHP简单留言本功能实现代码
Jun 09 PHP
php和asp语法上的区别总结
May 12 PHP
PHP面向对象程序设计重载(overloading)操作详解
Jun 13 PHP
PHP二维数组分页2种实现方法解析
Jul 09 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 Smarty初体验二 获取配置信息
2011/08/08 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
2011/05/10 Javascript
js 幻灯片的实现
2011/12/06 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
jquery live()重复绑定的解决方法介绍
2014/01/03 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
Bootstrap轮播图学习使用
2017/02/10 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
浅谈Node.js 中间件模式
2018/06/12 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
2018/10/29 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
Python绘制3D图形
2018/05/03 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
通过实例解析Python调用json模块
2019/12/11 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
世界文化遗产导游词
2015/02/13 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
病危通知单
2015/04/17 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js
教你nginx跳转配置的四种方式
2022/07/07 Servers