PHP,javascript实现大文件上传

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实现大文件上传的更多相关文章

ASP.NET Core MVC如何上传文件及处理大文件上传
用文件模型绑定接口:IFormFile (小文件上传) 当你使用IFormFile接口来上传文件的时候,一定要注意,IFormFile会将一个Http请求中的所有文件都读取到服务器内存后,才会触发AS ...
.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项目使用一般处理程序变成了中间件 ...
php实现大文件上传分片上传断点续传
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
使用webuploader实现大文件上传分片上传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
js大文件上传
一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...
全网最简单的大文件上传与下载代码实现（React+Go）
前言前段时间我需要实现大文件上传的需求,在网上查找了很多资料,并且也发现已经有很多优秀的博客讲了大文件上传下载这个功能. 我的项目是个比较简单的项目,并没有采用特别复杂的实现方式,所以我这篇文章的目 ...

随机推荐

js通用对象数组冒泡排序
数组对象通用 function sort(data, sortFiled, orderby) { var result = data, temp; for (var i = 0; i < res ...
聊聊C#中的Visitor模式
写在前面 Visitor模式在日常工作中出场比较少,如果统计大家不熟悉的模式,那么它榜上有名的可能性非常大.使用频率少,再加上很多文章提到Visitor模式都着重于它克服语言单分派的特点上面,而对何时 ...
MySQL基准测试工具
一.基准测试基准测试(benchmark)是针对系统设计的一种压力测试. 基准测试是简化了的压力测试. 1.1 常见指标 TPS QPS 响应时间并发量 1.2 收集与分析数据脚本收集数据的sh ...
vue上传图片的3种方式
https://blog.csdn.net/q3254421/article/details/88250968?utm_medium=distribute.pc_relevant.none-task- ...
Java线程池ThreadPoolExecutor极简教程
ThreadPoolExecutor 简介 ThreadPoolExecutor 是 java.util.concurrent 包下的一个类,在jdk1.5版本引入,帮助开发人员管理线程并方便地执行并 ...
给IDEA道个歉，这不是它的BUG，而是反编译插件的BUG。
你好呀,我是歪歪. 上周我不是发了<我怀疑这是IDEA的BUG,但是我翻遍全网没找到证据!>这篇文章吗. 主要描述了在 IDEA 里面反编译后的 class 文件中有这样的代码片段: 很明 ...
Python汉诺塔求解
1 def hanoi(n,a,b,c): 2 3 if(n>0): 4 5 hanoi(n-1,a,b,c) 6 7 print("Move disc no:%d from pile ...
Golang 常见设计模式之单例模式
之前我们已经看过了 Golang 常见设计模式中的装饰和选项模式,今天要看的是 Golang 设计模式里最简单的单例模式.单例模式的作用是确保无论对象被实例化多少次,全局都只有一个实例存在.根据这一特 ...
从零开始实现lmax-Disruptor队列（一）RingBuffer与单生产者、单消费者工作原理解析
1.lmax-Disruptor队列介绍 disruptor是英国著名的金融交易所lmax旗下技术团队开发的一款java实现的高性能内存队列框架其发明disruptor的主要目的是为了改进传统的内存 ...
net core天马行空系列-微服务篇：全声明式http客户端feign快速接入微服务中心nacos
1.前言 hi,大家好,我是三合,距离上一篇博客已经过去了整整两年,这两年里,博主通关了<人生>这个游戏里的两大关卡,买房和结婚.最近闲了下来,那么当然要继续写博客了,今天这篇博客的主要内 ...

PHP,javascript实现大文件上传

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

随机推荐

热门专题