关键词：
分块传输的原理就是利用HTML5新增的文件slice截取函数。
代码如下：
html：
<input id="f" type="file" name="part" onchange="writeFile()">
JS：
核心部分已经加粗显示了，其他部分不用看，因为实现的方式有很多种，不一定要按照我的方式去写，但是核心是不会变的。
var writeFile = function(){
var temp = null;
var formData = null;
var xhr = null;var file = document.getElementById(‘f‘);
var f = file.files[0];
var totalSize = f.size;// 每次截取的大小
var num = 1024*1024;var start = 0;
var end = start + num;// 发送到的地址
var url = ‘http://127.0.0.1/index.php‘;// 进度条
var loaded = function(bili){
console.log(bili);
};writeFile = function(){
// 如果已经截取完了跳出这个函数。
if(start>=totalSize)return;// 截取文件
temp = f.slice(start,end);
formData = new FormData();
formData.append(file.name,temp);xhr = new XMLHttpRequest();
xhr.open(‘POST‘,url);xhr.onreadystatechange = function(){
if(this.readyState===4 && this.status===200){
// 改变下一次截取的位置
start = end;
end = start + num;
// 因为截取可能超过totalSize，判断最后一次截取是否大于totalSize如果大于就直接让end等于totalSize
if(end>totalSize){
end = totalSize;
}
// 可以用这个做进度条
loaded((start/totalSize)*100);
// 递归，如果文件没有截取完，继续截取
writeFile();
}
};
xhr.send(formData);
};// 调用一下
writeFile();
};
当然除了这些还是不够的，后端也是需要处理一下的，因为现在发送过去的文件是一块一块的，所有需要合并一下，不过已经和前端没有关系了，但我还是给出代码吧。
<?php
// 判断是否有这个文件
if(!file_exists(‘./a/up.wmv‘)){//创建一个文件
move_uploaded_file($_FILES[‘part‘][‘tmp_name‘],‘./a/up.wmv‘);
}else{//将前面的那个文件和当前这个文件合并，FILE_APPEND把当前这个内容追加上去。
file_put_contents(‘./a/up.wmv‘,file_get_contents($_FILES[‘part‘][‘tmp_name‘]),FILE_APPEND);
echo ‘ok‘;
}?>
带进度条的文件上传？
】带进度条的文件上传？【英文标题】：Fileuploaderwithprogressbar?【发布时间】：2011-09-1108:01:12【问题描述】：如何创建带有进度条的HTML/PHP/AJAX文件上传器？我不知道从哪里开始。【问题讨论】：【参考方案1】：我用过Uploadify。易... 查看详情
jqueryajax实现上传文件代码，带进度条
原文：jqueryajax实现上传文件代码，带进度条 源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传 查看详情
jqueryajax实现上传文件代码，带进度条
原文：jqueryajax实现上传文件代码，带进度条 源代码下载地址：http://www.zuidaima.com/share/1550463291116544.htmajax上传文件代码，带进度条的。首页http://localhost:端口/项目名/common/test.htm上传中标签： jquery ajax 上传 ... 查看详情
如何使用进度条快速上传大文件？
】如何使用进度条快速上传大文件？【英文标题】：Howtouploadlargefileinexpresswithprogressbar?【发布时间】：2012-10-1201:46:31【问题描述】：目前我正在使用socket.io上传带有进度条的视频。这是教程http://net.tutsplus.com/tutorials/javascript-ajax/h... 查看详情
关于文件上传下载以及其他进度条的实现
...on中自定义类，定时器ajax达到实时更新进度的效果。 文件上传使用了commons-fileuplo 查看详情
如何在ajax文件上传中显示进度条
】如何在ajax文件上传中显示进度条【英文标题】：Howtoshowprogressbarinajaxfileupload【发布时间】：2013-01-2605:22:52【问题描述】：我的代码发布了ajax请求，但没有显示进度条。请帮助更正代码以显示工作进度条。$(document).ready(function()... 查看详情
使用 Java 上传文件（带进度条）
】使用Java上传文件（带进度条）【英文标题】：FileUploadwithJava(withprogressbar)【发布时间】：2010-09-2006:17:55【问题描述】：我对Java非常陌生，而且我主要是边学边自学，所以我开始构建一个小程序。我想做一个可以从本地磁盘中... 查看详情
springmvc带进度条的多文件上传
1、关于文件上传进度条的实现在说SpringMVC文件上传尤其是带滚动条之前先用servlet做一个简单的文件上传并返回进度信息这样的功能。（1）需要两个包：commons-fileupload-1.3.1.jarcommons-io-1.4.jar上面这两个包是Apache推出的... 查看详情
ajax-----16html5实现大文件切割上传
2点多接了个电话导致失眠，没办法，跑起来接着板砖了。。。。。。废话不多说，直接走码。。。 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style&g 查看详情
[layui]上传文件带进度条+表单提交功能优化(代码片段)
上传文件带进度条+表单提交功能优化前期做了一个简视频提交；每次只提交一个需要重新上传。视频文件较大时候没有进度提示，用户体验并不好，今天做一个简单的优化！如果监听提交表单时候，回调路径可能还未完成。提... 查看详情
HTML5：带有进度条的 AJAX 文件上传
】HTML5：带有进度条的AJAX文件上传【英文标题】：HTML5:AJAXfileuploadwithprogressbar【发布时间】：2011-11-0602:38:13【问题描述】：我正在寻找一个带有HTML5进度条的文件上传器。我尝试使用其他地方的一些教程，包括SO。ThisSOanswer（被接... 查看详情
webuploader插件单个文件上传（带进度条）
@{ViewBag.Title="主页";}<scriptsrc="~/Scripts/jquery-1.9.1.min.js"></script><linkhref="~/Scripts/1/bootstrap.css"rel="stylesheet"/><linkhref="~/Scripts/1/webuploader.css"rel="styles 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
使用 jQuery 的文件上传进度条
】使用jQuery的文件上传进度条【英文标题】：FileuploadprogressbarwithjQuery【发布时间】：2013-03-0220:39:19【问题描述】：我正在尝试在我的项目中实现AJAX文件上传功能。我为此使用jQuery；我的代码使用AJAX提交数据。我还想实现一个文... 查看详情
使用 XMLHttpRequest 上传大文件时的进度条
】使用XMLHttpRequest上传大文件时的进度条【英文标题】：ProgressbarwhileuploadinglargefileswithXMLHttpRequest【发布时间】：2013-04-0415:27:08【问题描述】：我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。我已经在文档和其... 查看详情
Ajax表单上传进度条
...的HTML4表单上传，而不是新的HTML5API）。进度实际上跟踪文件移动后正在完成的其他工作。它的设计方式是流保持打开状态，直到完成额外的工作，然后服务器端方法最终返回，从而关闭流。我遇到了一些特定于Chrome的问题。我... 查看详情
带有节点（socket.io 和强大）和 ajax 的文件上传进度条
】带有节点（socket.io和强大）和ajax的文件上传进度条【英文标题】：afileuploadprogressbarwithnode(socket.ioandformidable)andajax【发布时间】：2014-06-0308:24:15【问题描述】：我正在自学一些Ajax，本课需要在本地构建一个简单的文件上传表单... 查看详情
如何在ajax调用中获取文件上传进度状态？
】如何在ajax调用中获取文件上传进度状态？【英文标题】：Howtogetthefileuploadingprogressstatusinajaxcall?【发布时间】：2020-04-0408:36:44【问题描述】：我正在通过ajax上传多个文件，我需要在其中保留一个进度条。只有在所有过程完成后... 查看详情