HTML代码

<!doctype html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport"

   content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <title>Document</title>

 <style>

  #progress{

   width: 300px;

   height: 20px;

   background-color:#f7f7f7;

   box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);

   border-radius:4px;

   background-image:linear-gradient(to bottom,#f5f5f5,#f9f9f9);

  }

  #finish{

   background-color: #149bdf;

   background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);

   background-size:40px 40px;

   height: 100%;

  }

  form{

   margin-top: 50px;

  }

 </style>

</head>

<body>

<div id="progress">

 <div id="finish" style="width: 0%;" progress="0"></div>

</div>

<form action="./upload.php">

 <input type="file" name="file" id="file">

 <input type="button" value="停止" id="stop">

</form>

<script>

 var fileForm = document.getElementById("file");

 var stopBtn = document.getElementById('stop');

 var upload = new Upload();

 fileForm.onchange = function(){

  upload.addFileAndSend(this);

 }

 stopBtn.onclick = function(){

  this.value = "停止中";

  upload.stop();

  this.value = "已停止";

 }

 function Upload(){

  var xhr = new XMLHttpRequest();

  var form_data = new FormData();

  const LENGTH = 1024 * 1024;

  var start = 0;

  var end = start + LENGTH;

  var blob;

  var blob_num = 1;

  var is_stop = 0

  //对外方法，传入文件对象

  this.addFileAndSend = function(that){

   var file = that.files[0];

   blob = cutFile(file);

   sendFile(blob,file);

   blob_num += 1;

  }

  //停止文件上传

  this.stop = function(){

   xhr.abort();

   is_stop = 1;

  }

  //切割文件

  function cutFile(file){

   var file_blob = file.slice(start,end);

   start = end;

   end = start + LENGTH;

   return file_blob;

  };

  //发送文件

  function sendFile(blob,file){

   var total_blob_num = Math.ceil(file.size / LENGTH);

   form_data.append('file',blob);

   form_data.append('blob_num',blob_num);

   form_data.append('total_blob_num',total_blob_num);

   form_data.append('file_name',file.name);

   xhr.open('POST','./upload.php',false);

   xhr.onreadystatechange = function () {

    var progress;

    var progressObj = document.getElementById('finish');

    if(total_blob_num == 1){

     progress = '100%';

    }else{

     progress = Math.min(100,(blob_num/total_blob_num)* 100 ) +'%';

    }

    progressObj.style.width = progress;

    var t = setTimeout(function(){

     if(start < file.size && is_stop === 0){

      blob = cutFile(file);

      sendFile(blob,file);

      blob_num += 1;

     }else{

      setTimeout(t);

     }

    },1000);

   }

   xhr.send(form_data);

  }

 }

</script>

</body>

</html>

　　PHP代码

<?php

class Upload{

 private $filepath = './upload'; //上传目录

 private $tmpPath; //PHP文件临时目录

 private $blobNum; //第几个文件块

 private $totalBlobNum; //文件块总数

 private $fileName; //文件名

 public function __construct($tmpPath,$blobNum,$totalBlobNum,$fileName){

  $this->tmpPath = $tmpPath;

  $this->blobNum = $blobNum;

  $this->totalBlobNum = $totalBlobNum;

  $this->fileName = $fileName;

  $this->moveFile();

  $this->fileMerge();

 }

 //判断是否是最后一块，如果是则进行文件合成并且删除文件块

 private function fileMerge(){

  if($this->blobNum == $this->totalBlobNum){

   $blob = '';

   for($i=1; $i<= $this->totalBlobNum; $i++){

    $blob .= file_get_contents($this->filepath.'/'. $this->fileName.'__'.$i);

   }

   file_put_contents($this->filepath.'/'. $this->fileName,$blob);

   $this->deleteFileBlob();

  }

 }

 //删除文件块

 private function deleteFileBlob(){

  for($i=1; $i<= $this->totalBlobNum; $i++){

   @unlink($this->filepath.'/'. $this->fileName.'__'.$i);

  }

 }

 //移动文件

 private function moveFile(){

  $this->touchDir();

  $filename = $this->filepath.'/'. $this->fileName.'__'.$this->blobNum;

  move_uploaded_file($this->tmpPath,$filename);

 }

 //API返回数据

 public function apiReturn(){

  if($this->blobNum == $this->totalBlobNum){

    if(file_exists($this->filepath.'/'. $this->fileName)){

     $data['code'] = 2;

     $data['msg'] = 'success';

     $data['file_path'] = 'http://'.$_SERVER['HTTP_HOST'].dirname($_SERVER['DOCUMENT_URI']).str_replace('.','',$this->filepath).'/'. $this->fileName;

    }

  }else{

    if(file_exists($this->filepath.'/'. $this->fileName.'__'.$this->blobNum)){

     $data['code'] = 1;

     $data['msg'] = 'waiting for all';

     $data['file_path'] = '';

    }

  }

  header('Content-type: application/json');

  echo json_encode($data);

 }

 //建立上传文件夹

 private function touchDir(){

  if(!file_exists($this->filepath)){

   return mkdir($this->filepath);

  }

 }

}

//实例化并获取系统变量传参

$upload = new Upload($_FILES['file']['tmp_name'],$_POST['blob_num'],$_POST['total_blob_num'],$_POST['file_name']);

//调用方法，返回结果

$upload->apiReturn();

PHP,javascript实现大文件上传的更多相关文章

  1. 使用百度webuploader实现大文件上传

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  2. web大文件上传(web应用---SSH框架)

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  3. 大文件上传插件webupload插件

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  4. ASP.NET Core MVC如何上传文件及处理大文件上传

    用文件模型绑定接口:IFormFile (小文件上传) 当你使用IFormFile接口来上传文件的时候,一定要注意,IFormFile会将一个Http请求中的所有文件都读取到服务器内存后,才会触发AS ...

  5. .net core 3.0web_razor page项目_使用中间件接受大文件上传报错_httpRequest.Form threw an exception of type Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException_Request body too large

    前言:在web项目的.net framework时文件上传时,自己常用一般处理程序接受上传文件,上传文件的大小限制是可以项目的webconfig里配置.   到core项目使用一般处理程序变成了中间件 ...

  6. php实现大文件上传分片上传断点续传

    前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...

  7. 使用webuploader实现大文件上传分片上传

    本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...

  8. js大文件上传

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  9. 全网最简单的大文件上传与下载代码实现（React+Go）

    前言 前段时间我需要实现大文件上传的需求,在网上查找了很多资料,并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能. 我的项目是个比较简单的项目,并没有采用特别复杂的实现方式,所以我这篇文章的目 ...

随机推荐

  1. 【工具-Nginx】从入门安装到高可用集群搭建

    文章已收录至https://lichong.work,转载请注明原文链接. ps:欢迎关注公众号"Fun肆编程"或添加我的私人微信交流经验 一.Nginx安装配置及常用命令 1.环 ...

  2. Blazor和Vue对比学习（基础1.9）：表单输入绑定和验证，VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  3. requests入门

    1.通过GET请求获得搜索结果的网页源代码 import requests name=input("请输入想要搜索的明星:") url=f'https://www.sogou.co ...

  4. vue面试总结-2022

    1.vue生命周期及各周期得特点 beforCreate 特点: 初始化实例,不能使用data和methods.ref 示例 beforeCreate: function () { console.g ...

  5. React history.push()无法跳转 url改变页面不渲染

    一.history.push()无法跳转参考了很多文章 研究一下生命周期 render是要有state变化才会执行 BrowserHistory只有props变化 无法触发render 如下改造环境 ...

  6. 【原创】eNSP路由器启动#号问题排查

    1.删除拖出来的设备,重新拖出来一台---我用过[有时候好使] 2.确保Ensp的设置-工具-Virtual Box安装目录是否正确--我也遇到过[尤其是卸载掉Virtual Box重装之后] 3.确 ...

  7. Groovy基础语法

    Groovy 基础语法 变量定义 1.支持动态类型,使用def关键字定义变量 // Java中定义变量的方式 int age = 18; String name = "张三"; / ...

  8. ShardingSphere-proxy-5.0.0部署之分表实现(一)

    一.说明 环境准备:JDK8+     mysql 5.x 官网:https://shardingsphere.apache.org/ 下载地址:https://archive.apache.org/ ...

  9. 华为云Stack首席架构师：打造“称手”的数字化工具，答好政企IT数字化转型这道必选题

    摘要:数字化转型是一号位工程,数字化的工具本身就是企业的核心竞争力. 本文分享自华为云社区<华为云Stack首席架构师:打造"称手"的数字化工具,答好政企IT数字化转型这道必 ...

  10. 5种在TypeScript中使用的类型保护

    摘要:在本文中,回顾了TypeScript中几个最有用的类型保护,并通过几个例子来了解它们的实际应用. 本文分享自华为云社区<如何在TypeScript中使用类型保护>,作者:Ocean2 ...