原生JS上传大文件显示进度条 php上传文件代码-js教程-PHP中文网

首页

web前端

js教程

原生JS上传大文件显示进度条 php上传文件代码

韦小宝

Jan 12, 2018 am 09:58 AM

javascript php 进度

这篇文章主要为大家详细介绍了JS原生上传大文件显示进度条，php上传文件关键代码，具有一定的参考和学习JS的价值，对JS上传感兴趣的小伙伴们可以参考一下本篇文章

JS原生上传大文件显示进度条，php上传文件，供大家参考，具体内容如下

在php.ini修改需要的大小：

upload_max_filesize = 8M
post_max_size = 10M
memory_limit = 20M

<!DOCTYPE html>
<html>
<head>
  <title>原生JS大文件显示进度条</title>
  <meta charset="UTF-8">
  <style type="text/css">
    #parent{position: relative;width: 500px;height:20px;border:1px solid #ccc;display: none;border-radius:20px}
    #child{position: absolute;width:0%;height:20px;background: #5FB878;display: none;line-height: 20px;color: #ffffff;font-size: 12px;border-radius:20px}
  </style>
  <script type="text/javascript">
    function $(id){
      return document.getElementById(id);
    }
  </script>
</head>
<body>
  <form action="" method="post">
    <p id="parent">
      <p id="child"></p>
    </p>
    <p>上传文件:<input type="file" name="file"></p>  
    <p><input type="submit" value="提交" id="submit"></p>
  </form>
  <script type="text/javascript">
    var oForm = document.getElementsByTagName(&#39;form&#39;)[0];
    var oSubmit = $(&#39;submit&#39;);
    //如果多个人同时提交这个表单的时候，由于是异步的请求，互不影响
    oSubmit.onclick = function(){
      try{
        var xhr = new XMLHttpRequest();
      }catch(e){
        var xhr = new ActiveXObject("Msxml2.XMLHTTP");
      }
      xhr.upload.onprogress = function(e){
        var ev = e || window.event;
        var percent = Math.floor((ev.loaded / ev.total)*100);    
        // console.log(percent);
        //将百分比显示到进度条
        $(&#39;parent&#39;).style.display = &#39;block&#39;;
        $(&#39;child&#39;).style.display = &#39;block&#39;;
        //将上传进度的百分比显示到child里面
        $(&#39;child&#39;).style.width = percent+&#39;%&#39;;
        $(&#39;child&#39;).style.textAlign = &#39;center&#39;;
        $(&#39;child&#39;).innerHTML = percent+&#39;%&#39;;
        //判断如果百分比到达100%时候，隐藏掉
        if(percent==100){
          $(&#39;parent&#39;).style.display = &#39;none&#39;;
          $(&#39;child&#39;).style.display = &#39;none&#39;;
        }
      }
      xhr.open(&#39;post&#39;,&#39;progress.php&#39;,true);
      var form = new FormData(oForm);
      xhr.send(form);
      xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status==200){
          eval("var obj ="+xhr.responseText);
          if(obj.status){
            alert(&#39;上传成功&#39;);
          }else{
            alert(&#39;上传失败&#39;);
          }
        }
      }
      //阻止表单提交
      return false;
    }
  </script>
</body>
</html>

登录后复制

PHP代码：

<?php
  //开始上传
  //注意：文件是windows系统的文件，采用的gbk编码，php文件使用的是utf-8编码
  //我们不能直接修改文件的编码，只能临时修改一下php的编码
  $dst_file = $_FILES[&#39;file&#39;][&#39;name&#39;];
  $dst_file = iconv(&#39;utf-8&#39;, &#39;gbk&#39;, $dst_file);
  if(move_uploaded_file($_FILES[&#39;file&#39;][&#39;tmp_name&#39;],$dst_file)){
    $data[&#39;status&#39;] = 1;
  }else{
    $data[&#39;status&#39;] = 0;
  }
  echo json_encode($data);

登录后复制

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

热AI工具

热工具

热门话题

Java教程

1673

CakePHP 教程

1429

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

PHP与Python：了解差异 Apr 11, 2025 am 12:15 AM

PHP和Python各有优势，选择应基于项目需求。1.PHP适合web开发，语法简单，执行效率高。2.Python适用于数据科学和机器学习，语法简洁，库丰富。

PHP：网络开发的关键语言 Apr 13, 2025 am 12:08 AM

PHP是一种广泛应用于服务器端的脚本语言，特别适合web开发。1.PHP可以嵌入HTML，处理HTTP请求和响应，支持多种数据库。2.PHP用于生成动态网页内容，处理表单数据，访问数据库等，具有强大的社区支持和开源资源。3.PHP是解释型语言，执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时，可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7

PHP和Python：比较两种流行的编程语言 Apr 14, 2025 am 12:13 AM

PHP和Python各有优势，选择依据项目需求。1.PHP适合web开发，尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能，语法简洁，适合初学者。

PHP行动：现实世界中的示例和应用程序 Apr 14, 2025 am 12:19 AM

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务：用于购物车功能和支付处理。2)内容管理系统：用于动态内容生成和用户管理。3)API开发：用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践，PHP应用的效率和可维护性得以提升。

PHP的持久相关性：它还活着吗？ Apr 14, 2025 am 12:12 AM

PHP仍然具有活力，其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用；2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色；3)PHP不断进化和优化，适用于初学者和经验丰富的开发者。

PHP和Python：解释了不同的范例 Apr 18, 2025 am 12:26 AM

PHP主要是过程式编程，但也支持面向对象编程（OOP）；Python支持多种范式，包括OOP、函数式和过程式编程。PHP适合web开发，Python适用于多种应用，如数据分析和机器学习。

PHP与其他语言：比较 Apr 13, 2025 am 12:19 AM

PHP适合web开发，特别是在快速开发和处理动态内容方面表现出色，但不擅长数据科学和企业级应用。与Python相比，PHP在web开发中更具优势，但在数据科学领域不如Python；与Java相比，PHP在企业级应用中表现较差，但在web开发中更灵活；与JavaScript相比，PHP在后端开发中更简洁，但在前端开发中不如JavaScript。

PHP和Python：代码示例和比较 Apr 15, 2025 am 12:07 AM

PHP和Python各有优劣，选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。

See all articles

原生JS上传大文件显示进度条 php上传文件代码

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题