php ajax实现文件上传进度条
发布:smiling 来源: PHP粉丝网 添加日期:2019-11-05 15:38:14 浏览: 评论:0
本实例是关于php文件上传时进度条的实现,主要采用ajax技术,另外还运用了html5,有需要的朋友可以研究一下。
本实例有两个文件:
upload_form.html:
- <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>
- <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>
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";
- //phpfensi.com
- } else {
- echo "move_uploaded_file function failed";
- }
- ?>
以上就是本文的全部内容,希望对大家的学习有所帮助。
Tags: php ajax文件上传
相关文章
- ·PHP 是什么?(2013-11-12)
- ·Php.ini文件位置在哪里 Php.ini文件找不到(2013-11-12)
- ·PHP 数据类型(2013-11-12)
- ·php 获取当前脚本的url(2013-11-12)
- ·php技术生成静态页面的实现(2013-11-13)
- ·缺陷月项目启动 披露PHP脚本语言漏洞(2013-11-13)
- ·在PHP中全面阻止SQL注入式攻击(2013-11-13)
- ·php生成随机密码的几种方法(2013-11-13)
- ·PHP中使用FCKeditor2.3.2配置(2013-11-13)
- ·如何使用PHP开发高效的WEB系统(2013-11-13)
- ·php:树形结构的算法(2013-11-13)
- ·php4和php5区别(2013-11-13)
- ·php数据库连接(2013-11-13)
- ·如何正确理解PHP的错误信息(2013-11-13)
- ·php页面漏洞分析及相关问题解决(2013-11-13)
- ·当在连接PHP时,抱怨一些数值没有定义参考?(2013-11-27)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)