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 相关文章推荐
php 中include()与require()的对比
Oct 09 PHP
用PHP伪造referer突破网盘禁止外连的代码
Jun 15 PHP
Array of country list in PHP with Zend Framework
Oct 17 PHP
深入php函数file_get_contents超时处理的方法详解
Jun 03 PHP
解析mysql中UNIX_TIMESTAMP()函数与php中time()函数的区别
Jun 24 PHP
discuz免激活同步登入代码修改方法(discuz同步登录)
Dec 24 PHP
浅析PHP中strlen和mb_strlen的区别
Aug 31 PHP
php保存二进制原始数据为图片的程序代码
Oct 14 PHP
PHPStrom中实用的功能和快捷键大全
Sep 23 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
Nov 17 PHP
php分页查询mysql结果的base64处理方法示例
May 18 PHP
PHP格式化显示时间date()函数代码
Oct 03 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 事件机制(2)
2011/03/23 PHP
php函数的常用方法及注意之处小结
2011/07/10 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
php时间戳转换代码详解
2019/08/04 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
简单谈谈JS数组中的indexOf方法
2016/10/13 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
AngularJS实践之使用ng-repeat中$index的注意点
2016/12/22 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
解决Mac node版本升级失败的问题
2018/05/16 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
微信小程序城市选择及搜索功能的方法
2019/03/22 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
[02:36]DOTA2英雄基础教程 一击致命幻影刺客
2013/12/06 DOTA
[01:50]《我与DAC》之玩家:iG夺冠时的那面红旗
2018/03/29 DOTA
python实现360的字符显示界面
2014/02/21 Python
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
怎样填写就业意向
2014/04/02 职场文书
高中生家长寄语大全
2014/04/03 职场文书
2014年合同管理工作总结
2014/12/02 职场文书
比赛主持人开场白
2015/05/29 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2019年个人工作总结范文
2019/03/25 职场文书
JavaScript流程控制(分支)
2021/12/06 Javascript
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis