文件上传服务器的大小是一定的,所以大文件可以切割成小文件,依次
传输,然后再拼接切割文件上传,用同步方式传输,为了防止异步传输
中多个块同时传输,文件拼接错误,导致文件损坏

前端页面

<!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. 在ASP.NET MVC中使用MySQL【并使用membership】

            大多数情况下我们使用.NET或ASP.NET(包括MVC)程序时,我们会同时选择SQL Server 或者SQL Express (其他微软产品)做数据库.但是今天使用MVC已经完全没 ...

  2. grunt入门之grunt watch的使用

    watch几乎是grunt必不可少的应用,一旦配置好watch,保存文件后将立即执行命令 安装方式如下: npm install grunt-contrib-watch --save-dev 安装好以 ...

  3. 【转】JAVA SSH 框架介绍

    转自:http://www.admin10000.com/document/150.html SSH 为 struts+spring+hibernate 的一个集成框架,是目前较流行的一种JAVA W ...

  4. Codeforces Educational Codeforces Round 3 C. Load Balancing 贪心

    C. Load Balancing 题目连接: http://www.codeforces.com/contest/609/problem/C Description In the school co ...

  5. Codeforces Round #335 (Div. 2) A. Magic Spheres 水题

    A. Magic Spheres Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contest/606/ ...

  6. 一步步学Mybatis-告别繁琐的配置之Mybatis配置文件生成工具 (7)

    今年是2013年的杀青之日,前几天由于比较忙,没有及时更新本篇的最后一篇东西,前六篇中我们主要都是采用手动配置相关的Mybatis映射文件与相应的接口类与实体类.当然如果在真正的使用过程中,由于业务的 ...

  7. [ES6] 14. Generator -- 1. yield & next()

    Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution  ...

  8. Android横竖屏切换及其相应布局载入问题

    第一.横竖屏切换连带载入多屏布局问题: 假设要让软件在横竖屏之间切换.因为横竖屏的高宽会发生转换,有可能会要求不同的布局. 能够通过下面两种方法来切换布局: 1)在res文件夹下建立layout-la ...

  9. 40 JavaScript Chart and Graph Libraries for Developers--reference

    reference:http://www.egrappler.com/javascript-chart-and-graph-libraries-for-developers/ BY TEAMEGRAP ...

  10. 乐观锁(optimistic locking)与悲观锁(pessimistic locking)

    首先,乐观锁(optimistic locking)与悲观锁(pessimistic locking)基本是针对数据处理来说,也就是跟数据库有关的术语,目的是为了解决并发处理时所遇到的相关性能问题,以 ...