html5批量文件上传

1. 大文件如何快速上传

在互联网时代，文件上传成为了一项常见的需求，尤其在用户头像上传、媒体文件分享和个性业务应用中。起初，我基于uploadify框架开发了一个HTML5版文件上传插件，该插件受到了用户和项目的广泛好评，适用于多种上传需求。然而，面对大文件上传时，传统方法存在的问题愈发明显，如上传速度受限、中途断开需重传等，使得用户体验大打折扣。

断点续传技术的引入，旨在解决大文件上传过程中因网络中断或误操作导致的上传失败问题，提升用户体验。传统的上传方式，如利用表单提交文件或HTML5的FormData接口，都是将文件一次性提交至服务器，服务器端再进行文件处理。这种方式无法实时保存文件上传进度，且无法保持浏览器与服务器的长连接以支持文件流上传，因此，断点续传成为必要。

实现断点续传的核心技术要点包括：文件分割、文件上传前获取已上传大小、上传完成后更新已上传大小记录、确保客户端与服务器端文件唯一性。通过借鉴经验，我将这些技术应用至Huploadify插件中，实现了断点续传功能，为用户提供更稳定的上传体验。

断点续传工作原理可分为三步：首先，获取文件大小并分割文件；其次，将分割的文件片按顺序上传至服务器，服务器端追加文件内容；最后，直至文件大小达到文件总大小，上传过程结束。HTML5的Blob数据类型及其slice()方法在文件分割中起到了关键作用，通过该方法可以截取文件的任意部分。文件片的保存与追加通过后台编程实现，PHP作为示例语言，可以利用file_get_contents和file_put_contents来完成文件的读取与追加操作。同时，实时保存已上传文件大小是实现断点续传的关键步骤，通常通过localStorage或后台数据库来实现，确保用户在不同页面或不同会话中上传文件时，能够准确记录已上传部分，避免重复上传。

在服务端保存数据是实现可靠上传的重要环节，涉及文件匹配、大小比较等逻辑。通过传递文件名和最后修改时间等信息，服务端能够精准定位文件位置，确保数据的准确性和安全性。项目中使用数据库来记录已上传文件信息，以便在断点续传过程中快速查找和追加文件内容。在上传过程中，后台需要处理接收到的文件名和最后修改时间，通过比较与前台请求信息的一致性，确保上传过程的正确性。

断点续传功能的实现，需要细致考虑各种上传场景和系统兼容性，包括多账户上传同一文件、文件内容修改后的上传、多按钮上传同一文件等。服务端需具备强大的数据处理能力，以确保在复杂的系统环境中正确处理上传请求。此外，插件提供了多种配置选项，允许开发者根据需求灵活调整上传策略，如断点续传功能的启用与禁用。通过提供丰富的API接口和示例代码，Huploadify插件为开发者提供了便捷的集成与优化途径。

该版本的Huploadify插件在功能和性能上进行了优化，包括增加回调函数、事件支持、文件删除功能、文件格式过滤等功能，同时支持文件选择、文件夹选择和粘贴操作。通过完善input file组件的accept属性，插件能更好地适应用户的文件浏览需求。此外，插件对外提供了方法调用接口，允许用户通过JavaScript进行文件上传、暂停、取消、禁用和启用等操作，实现了高度的可定制性。在处理已知bug的同时，插件还对断点续传功能进行了详细说明，以确保用户能够顺利集成和使用。

总结而言，Huploadify插件通过实现断点续传功能，显着提升了大文件上传的稳定性和用户体验。该功能的实现需要跨客户端和服务器端的技术合作，包括文件分割、上传管理、服务端数据处理等多个环节。通过不断优化和测试，Huploadify插件为开发者提供了一个强大、灵活且易于集成的文件上传解决方案。在实际应用中，用户可以期待更流畅、更安全的文件上传体验。

2. 如何html5分割上传实现超大文件无插件网页上传

//代码不支持IE因为IE对HTML5支持不好
$("#file").change(function(event){
varfile=$("#file")[0].files[0];
PostFile(file,0);

});
functionPostFile(file,i){
varname=file.name,//文件名
size=file.size,//总大小shardSize=2*1024*1024,
shardSize=2*1024*1024,//以2MB为一个分片
shardCount=Math.ceil(size/shardSize);//总片数
if(i>=shardCount){
return;
}
//计算每一片的起始与结束位置
varstart=i*shardSize,
end=Math.min(size,start+shardSize);
//构造一个表单，FormData是HTML5新增的
varform=newFormData();
form.append("data",file.slice(start,end));//slice方法用于切出文件的一部分
form.append("lastModified",file.lastModified);//slice方法用于切出文件的一部分
form.append("name",name);
form.append("total",shardCount);//总片数
form.append("index",i+1);//当前是第几片
//Ajax提交
$.ajax({
url:"/test/AjaxFile",
type:"POST",
data:form,
async:true,//异步
processData:false,//很重要，告诉jquery不要对form进行处理
contentType:false,//很重要，指定为false才能形成正确的Content-Type
success:function(data){
if(data){
i=data++;
varnum=Math.ceil(i*100/shardCount);
$("#output").text(num+'%');
PostFile(file,i);
}
}
});
}