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

随机推荐

升级 package.json 内所有包的版本号
安装全局安装这个库 npm-check-updates,因为后续依靠它来实现更新 package.json 中包的版本号 yarn global add npm-check-updates 食用看 ...
Hibernate基础入门2
HQL与Criteria HQL(Hibernate Query Language)-官方推荐面向对象的查询语言,与SQL不同,HQL中的对象名是区分大小写的(除了JAVA类和属性其他部分不区分大小写 ...
官方出品，比 mydumper 更快的逻辑备份工具
mysqldump 和 mydumper 是我们常用的两个逻辑备份工具. 无论是 mysqldump 还是 mydumper 都是将备份数据通过 INSERT 的方式写入到备份文件中. 恢复时,myl ...
iview 酸爽debug: subMenu默认选中无效的解决方法
一. 在iview中写一个submenu <Col span="3" type="flex" v-if="showCids"> ...
Jmeter接口参数化<自动化>（csv文件）管理测试用例以及断言
1.创建相关线程组(不解释) 2.创建相应的请求(在请求中设置变量) 下面截图中①②③④⑤⑥⑦皆可以设置为变量 3.新建CSV文件将请求中设置的变量为明确了解每个字段的含义(皆可以将变量填写到列表的 ...
sqlmap自动检测漏洞并进行渗透
使用案例靶场为上篇文章介绍的封神台---靶场 https://hack.zkaq.cn/ 提示:采用开源靶场里面的猫舍进行渗透注入,仅用于安全防范无安全侵犯 1.首先检测是否已经安装成功sqlma ...
浏览器代理user-agent
两种方法: 法1:浏览器地址栏输入:about://version,然后复制用户代理: 如果法1不行,法2肯定可以. 法2:打开任意浏览器,输入任意网址,下面以火狐和百度网址为例来进行说明: 打开火狐 ...
【python】tile函数简单介绍
转:https://blog.csdn.net/april_newnew/article/details/44176059格式:tile(A,reps)* A:array_like* 输入的array ...
Vue搭建后台系统需要做的几点（持续更新中）
前言持续更新一.UI框架推荐 Elemnet ui 二.图表 vue-schart npm install vue-schart -S <template> <div id=& ...
一文精通HashMap灵魂七问，你学还是不学
如果让你看一篇文章,就可以精通HashMap,成为硬刚才面试官的高手,你学还是不学? 别着急,开始之前不如先尝试回来下面几个问题吧: HashMap的底层结构是什么? 什么时候HashMap中的链表会 ...

PHP,javascript实现大文件上传

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

随机推荐

热门专题