Home > Article > php教程 > php ajax实现文件上传进度条，

php ajax实现文件上传进度条，

WBOYOriginal: 2016-06-13 08:42:44829browse

php ajax实现文件上传进度条，

本实例是关于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：

<&#63;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";
}
&#63;>

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

您可能感兴趣的文章:

jQuery Ajax文件上传(php)
ajax+php打造进度条 readyState各状态
ajax+php打造进度条代码[readyState各状态说明]
File, FileReader 和 Ajax 文件上传实例分析(php)
php中通过Ajax如何实现异步文件上传的代码实例
php+ajax实现带进度条的大数据排队导出思路以及源码
php+ajax实现图片文件上传功能实例
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
PHP+apc+ajax实现的ajax_upload上传进度条代码

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：简介PHP的Yii框架中缓存的一些高级用法，phpyii框架缓存Next article：PHP的PDO操作简单示例，pdo操作简单示例

See more

php ajax实现文件上传进度条，

php ajax实现文件上传进度条，

您可能感兴趣的文章:

Related articles