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

随机推荐

DOM操作标签，事件绑定，jQuery框架
DOM操作标签 ''' 在起变量名的时候如果该变量指向的是一个标签那么建议使用 xxxEle eg:aEle\pEle\divEle\spanEle ''' 基本使用动态创建一个标签 var 变 ...
mysql外键，锁
mysql外键: 场景:用于建立两个表之间的联系,让A表中一个字段,可以在另一个表中字段值的范围去查找注意事项: (1)被参照表和参照表字段属性必须一致 (2)参照表必须设置主键 (3)必须选择支持 ...
我用13行摆烂了你的oj4
13行代码AC oj4是怎么回事呢?13行代码AC oj4相信大家都很熟悉,但是13行代码AC oj4是怎么回事呢,下面就让小编带大家一起了解吧.13行代码AC oj4,其实就是13行代码AC oj4 ...
spring boot redis 写入异常
redis 的 key value 使用 json 序列化.反序列化时,写入的 bean 不能是 final 类型的类,否则无法解析
101_Power Pivot DAX 累计至今，历史累计至今
焦棚子的文章目录一.背景 DAX中已经有诸如YTD,QTD,MTD时间智能函数.用起来也比较方便. 但很多时候需要看历史累计至今的数据,需要自己根据实际情况写dax. 今天抛砖引玉,写一个示例. 二 ...
使用ROOT用户运行Jenkins
!本教程仅适用于以YUM.APT等包管理器安装的Jenkins. 使用ROOT用户运行Jenkins,以保证Jenkins以最高权限执行任务. 注:会存在安全风险! 1.找到Jenkins启动脚本通 ...
题解 P1276 校门外的树（增强版）
前言本蒟蒻重学线段树,发现了这道题可以用线段树做. 虽然数据范围很小可以直接暴力,但由于在练习线段树所以打算用线段树写这道题. 本题解针对已经有线段树基础的巨佬,不懂线段树原理的话可以学习线段树后再 ...
VS Code官方插件集与工具
如果您也使用VS Code作为CabloyJS项目开发的主编辑器,那么可以参考官方使用的插件集,此外也提供了一些周边工具这是官方亲测可用的最简插件集,再也不必东奔西走了插件集插件名称用途 Vi ...
Java 基础常见知识点&面试题总结(中)，2022 最新版！| JavaGuide
你好,我是 Guide.秋招即将到来,我对 JavaGuide 的内容进行了重构完善,公众号同步一下最新更新,希望能够帮助你. 上篇:Java 基础常见知识点&面试题总结(上),2022 最新 ...
cool-admin vite-vue3 打包部署 nginx代理设置
location /api {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://xxx.com;}location /socket.io {rewrite ...

PHP,javascript实现大文件上传

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

随机推荐

热门专题