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 相关文章推荐
桌面中心(四)数据显示
Oct 09 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
Apr 24 PHP
非常好用的两个PHP函数 serialize()和unserialize()
Feb 04 PHP
openflashchart 2.0 简单案例php版
May 21 PHP
PHP字符串的连接的简单实例
Dec 30 PHP
解读PHP的Yii框架中请求与响应的处理流程
Mar 17 PHP
PHP动态生成指定大小随机图片的方法
Mar 25 PHP
PHP中key和current,next的联合运用实例分析
Mar 29 PHP
PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】
Apr 19 PHP
php简单中奖算法(实例)
Aug 15 PHP
php使用curl伪造来源ip和refer的方法示例
May 08 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
Sep 29 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不用递归遍历目录下所有文件的代码
2014/07/04 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
网站防止被刷票的一些思路与方法
2015/01/08 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
PHP获取毫秒级时间戳的方法
2015/04/15 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
PHP切割整数工具类似微信红包金额分配的思路详解
2019/09/18 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript中数组成员的添加、删除介绍
2014/12/30 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
2020/11/09 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
详解python eval函数的妙用
2017/11/16 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python利用tkinter实现屏保
2019/07/30 Python
python常用数据重复项处理方法
2019/11/22 Python
Python如何将图像音视频等资源文件隐藏在代码中(小技巧)
2020/02/16 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
红旗团支部事迹材料
2014/01/27 职场文书
卖房协议书样本
2014/10/30 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
Python利用FlashText算法实现替换字符串
2022/03/31 Python