php ajax实现文件上传进度条


Posted in PHP onMarch 29, 2016

本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下。
本实例有两个文件:

upload_form.html:

<!DOCTYPE html>
<html>
<head>
<script>
function _(el){
  return document.getElementById(el);
}
function uploadFile(){
  var file = _("file1").files[0];
  // alert(file.name+" | "+file.size+" | "+file.type);
  var formdata = new FormData();
  formdata.append("file1", file);
  var ajax = new XMLHttpRequest();
  ajax.upload.addEventListener("progress", progressHandler, false);
  ajax.addEventListener("load", completeHandler, false);
  ajax.addEventListener("error", errorHandler, false);
  ajax.addEventListener("abort", abortHandler, false);
  ajax.open("POST", "file_upload_parser.php");
  ajax.send(formdata);
}

function progressHandler(event){
  _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
  var percent = (event.loaded / event.total) * 100;
  _("progressBar").value = Math.round(percent);
  _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}

function completeHandler(event){
  _("status").innerHTML = event.target.responseText;
  _("progressBar").value = 0;
}

function errorHandler(event){
  _("status").innerHTML = "Upload Failed";
}

function abortHandler(event){
  _("status").innerHTML = "Upload Aborted";
}
</script>
</head>
<body>
<h2>HTML5 File Upload Progress Bar Tutorial</h2>
<form id="upload_form" enctype="multipart/form-data" method="post">
 <input type="file" name="file1" id="file1"><br>
 <input type="button" value="Upload File" onclick="uploadFile()">
 <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
 <h3 id="status"></h3>
 <p id="loaded_n_total"></p>
</form>
</body>
</html>

file_upload_parser.php:

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
  echo "ERROR: Please browse for a file before clicking the upload button.";
  exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){
  echo "$fileName upload is complete";
} else {
  echo "move_uploaded_file function failed";
}
?>

以上就是本文的全部内容,希望对大家的学习有所帮助。

PHP 相关文章推荐
example1.php
Oct 09 PHP
BBS(php &amp; mysql)完整版(二)
Oct 09 PHP
php 全局变量范围分析
Aug 07 PHP
frename PHP 灵活文件命名函数 frename
Sep 09 PHP
通用PHP动态生成静态HTML网页的代码
Mar 04 PHP
常用的PHP数据库操作方法(MYSQL版)
Jun 08 PHP
使用php计算排列组合的方法
Nov 13 PHP
PHP实现通用alert函数的方法
Mar 11 PHP
php中关于socket的系列函数总结
May 18 PHP
PHP高效获取远程图片尺寸和大小的实现方法
Oct 20 PHP
PHP二维数组实现去除重复项的方法【保留各个键值】
Dec 21 PHP
PHP+Session防止表单重复提交的解决方法
Apr 09 PHP
php $_SESSION会员登录实例分享
Jan 19 #PHP
PHP实现163邮箱自动发送邮件
Mar 29 #PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
Mar 29 #PHP
PHP创建word文档的方法(平台无关)
Mar 29 #PHP
PHP中key和current,next的联合运用实例分析
Mar 29 #PHP
CodeIgniter基于Email类发邮件的方法
Mar 29 #PHP
PHP中抽象类、接口的区别与选择分析
Mar 29 #PHP
You might like
PHP 观察者模式的实现代码
2013/05/10 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
Jquery获取复选框被选中值的简单方法
2013/07/04 Javascript
面向对象设计模式的核心法则
2013/11/10 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jQuery中的AjaxSubmit使用讲解
2016/09/25 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
Python字典及字典基本操作方法详解
2018/01/30 Python
ubuntu安装sublime3并配置python3环境的方法
2018/03/15 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
详解python运行三种方式
2019/05/13 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
python并发爬虫实用工具tomorrow实用解析
2019/09/25 Python
python 实现逻辑回归
2020/12/30 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
简述进程的启动、终止的方式以及如何进行进程的查看
2014/02/20 面试题
LINUX下线程,GDI类的解释
2016/12/14 面试题
物流创业计划书
2014/02/01 职场文书
进口业务员岗位职责
2014/04/06 职场文书
社会实践活动总结报告
2014/04/29 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
新教师个人总结
2015/02/06 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
解约证明模板
2015/06/19 职场文书
SQL SERVER实现连接与合并查询
2022/02/24 SQL Server