文件上传服务器的大小是一定的，所以大文件可以切割成小文件，依次

传输，然后再拼接切割文件上传，用同步方式传输，为了防止异步传输

中多个块同时传输，文件拼接错误，导致文件损坏

前端页面

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Ajax上传文件进度条显示</title>

<script type="text/javascript">

function sendfile(){

	const LENGTH=2*1024*1024;

	var sta=0;

	var end=sta+LENGTH;

	var blob=new Blob();

	var fd=null;

	var xhr=null;

	var pic=document.getElementsByTagName('input')[0].files[0];

	//console.log(pic);

	var name=pic.name;

	var  totalsize=pic.size;

	var precent=null;

	while(sta<totalsize){

		blob=pic.slice(sta,end);

		xhr=new XMLHttpRequest();

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

		fd=new FormData();

		fd.append('part',blob);

		fd.append('name',name)

		xhr.send(fd);

		precent=100 * (end/totalsize);

		if(precent>100){

			precent=100;

		}

		//console.log(precent);

		document.getElementById('nei').style.width=precent+'%';

		document.getElementById('precent').innerHTML=Math.floor(precent)+'%';

		sta=end;

		end=end+LENGTH;

	}

}

</script>

<style>

#wai{

width:500px;

height:30px;

border:1px solid green;

}

#nei{

width:0px;

height:30px;

background:green;

}

</style>

</head>

<body>

	<div id="wai">

		<div id="nei"></div>

	</div><span id="precent"></span><br/>

    <input type="file" name="pic" onchange="sendfile();"/>

</body>

</html>

03.php

<?php

/*

接收文件并合并

*/

//echo $_POST['name'];

//print_r($_FILES);

if(!file_exists('./upload/'.$_POST['name'])){

	move_uploaded_file($_FILES['part']['tmp_name'],'./upload/'.$_POST['name']);

}else{

	file_put_contents('./upload/'.$_POST['name'],file_get_contents($_FILES['part']['tmp_name']),FILE_APPEND);

}

echo 'ok';

?>

实现效果

Ajax大文件切割传输的更多相关文章

  1. AJAX大文件切割上传以及带进度条。

    分块传输的原理就是利用HTML5新增的文件slice截取函数. 代码如下: html: <input id="f" type="file" name=&q ...

  2. Ajax+Java实现大文件切割上传

    技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...

  3. 实战｜Linux大文件切割

    一个执着于技术的公众号 日常工作中需要对日志文件进行分析,当日志文件过大时,Linux中使用vim.cat.grep.awk等这些工具对大文件日志进行分析将会成为梦魇,具体表现在: 执行速度缓慢,文件 ...

  4. 简单实现TCP下的大文件高效传输

    简单实现TCP下的大文件高效传输 在TCP下进行大文件传输不象小文件那样直接打包个BUFFER发送出去,因为文件比较大所以不可能把文件读到一个BUFFER发送出去.主要有些文件的大小可能是1G,2G或 ...

  5. 大文件切割(split)

    split提供两种方式对文件进行切割: 根据行数切割,通过-l参数指定需要切割的行数 根据大小切割,通过-b参数指定需要切割的大小 1.1 根据行数切割 如下以一个3.4G大小的日志文件做切割演示,每 ...

  6. PHP搭建大文件切割分块上传功能

    背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示"该文件过大".因为一般情况下,我们都需要对上传的文件大小做限制,防止出现 ...

  7. PHP搭建大文件切割分块上传功能示例

    转载:https://www.jb51.net/article/101931.htm 背景 在网站开发中,文件上传是很常见的一个功能.相信很多人都会遇到这种情况,想传一个文件上去,然后网页提示“该文件 ...

  8. webservice大文件怎么传输

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

  9. 支持IE低版本的上传 大文件切割上传 断点续传 秒传

    1. http://files.cnblogs.com/files/blackice/UploadDemo.rar 此demo是使用的 swfupload 2.http://download.csdn ...

随机推荐

  1. sublime text 3 licence code

    Update:2016年3月9日09:14:12 可用 —– BEGIN LICENSE —–Michael BarnesSingle User LicenseEA7E-8213858A353C41 ...

  2. UIImage imageNamed 与 imageWithContentsOfFile的差别

    [UIImage imageNamed:]仅仅适合与UI界面中的贴图的读取,较大的资源文件应该尽量避免使用 用UIImage载入本地图像最经常使用的是以下三种: 1.用imageNamed方法 [UI ...

  3. Ubuntu下很给力的下载工具

    Windows下的下载工具--迅雷,之所下面载速度快,乃是它能搜索资源.为己所用,而不是只从原始地址这单一资源处下载. Ubuntu下也有类似的工具,那就是aira2. aira2是一个命令行下载工具 ...

  4. dsPIC33EP 高速PWM模块初始化设置及应用

    //文件 p33pwm6.h #ifndef _P33PWM6_H_ #define _P33PWM6_H_ //#include "p33pwm6.h" #define FSYN ...

  5. swift:自定义UICollectionViewFlowLayout

    写作目的 UICollectionView是ios中一个十分强大的控件,利用它能够十分简单的实现一些很好看的效果.UICollectionView的效果又依赖于UICollectionViewLayo ...

  6. Android progressBar 自定义圆形旋转图片

    项目需要中需要更换progressbar的旋转背景,在网上找了几种办法,但是都有各自的问题 于是结合网上所讲,研究了一下终于ok了: 一 首相在drawable文件夹中建立如下旋转动画文件 <? ...

  7. iOS开发——实用OC篇&多种定时器详细介绍

    多种定时器详细介绍   在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. 然而,在iOS中有很多方法完成以上的任务,到底有 ...

  8. centos 服务器配置(三) 之定时任务

    有些liunx系统已经自带定时任务crontab,但是有的新装系统还未安装定时任务,这个时候就需要我们手动对其进行安装. 安装crontab: yum install crontabs 说明: /sb ...

  9. j疑难杂症：ava.lang.NoSuchMethodError: com.opensymphony.xwork2.util.finder.ClassFinder.<init>

    严重: Exception starting filter struts2java.lang.NoSuchMethodError: com.opensymphony.xwork2.util.finde ...

  10. php 换行 空格分割处理

    <?php function parse_specification($specification){ $rt=array(); $lines=array_filter(preg_split(& ...