使用js实现分段上传文件,本文使用了FileReader对象,可参考:https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader

1)获取文件,分段读取

function WebDav_Upload() {
var file = document.getElementById('WebdavFileToUpload').files[0];
if (window.FileReader ){
if(file) {
total_file_size=file.size;
fromSize=ToSize;
ToSize=ToSize+ 4 * 1024;
if(ToSize>file.size){
ToSize=file.size;
} var reader = new FileReader();
var blob;
if(file.webkitSlice) {
blob = file.webkitSlice(fromSize, ToSize);
}else if (file.mozSlice) {
blob = file.mozSlice(fromSize, ToSize );
}else{
blob=file.slice(fromSize,ToSize);
}
reader.onprogress=function(p){
if (p.loaded){
}else {
}
}
reader.onloadend = function(){
if(isBrowser()=='IE'){
WebDav_PutSyncXML_IE11(Path_Name+file.name,file.type,fromSize,ToSize,file.size,reader.result);
}else{
WebDav_PutSyncXML(Path_Name+file.name,file.type,fromSize,ToSize,file.size,reader.result);
}
if (reader.error){
} else {
}
}
if(isBrowser()=='IE'){
reader.readAsArrayBuffer(blob);
}else{
reader.readAsBinaryString(blob);
}
}
}else{
showAlert("lupdateBrowser");
return;
}
}

2)使用ajax 上传文件

function WebDav_PutSyncXML(xmlName,FileType,FileDataFrom,FileDataTo,FileDataTotal,FileData) {
var host = window.location.protocol + "//" + window.location.host ;
var xmlNametemp=xmlName.replace(new RegExp("#","gm"),"%23");
var url = host + "/webdav" + xmlNametemp;
var content;
content=$.ajax( {
type: "PUT",
processData: false,
contentType: false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (!xhr.sendAsBinary) {
xhr.legacySend = xhr.send;
xhr.sendAsBinary = function(string) {
var bytes = Array.prototype.map.call(string, function(c) {
return c.charCodeAt(0) & 0xff;
});
this.legacySend(new Uint8Array(bytes).buffer);
};
}
xhr.send = xhr.sendAsBinary;
return xhr;
},
'beforeSend': function(xhr) {
xhr.setRequestHeader("Authorization",webdav_getAuthHeader("PUT"));
xhr.setRequestHeader("Content-Type", FileType);
if(FileDataFrom!=0) {
xhr.setRequestHeader("Content-Range", "bytes "+FileDataFrom+"-"+FileDataTo+"/"+FileDataTotal);
}
}, url: url,
data: FileData,
async: true,
success:function(data, textStatus) {
WebDav_Upload_Ondoing();
},
complete: function(XMLHttpRequest, textStatus) {
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
}
}).responseXML;
return content; }

3)处理上传进度条

function WebDav_Upload_Ondoing() {
if(Cancel_flag==1){
var cancelfilename=document.getElementById('webdavuploadschedule_FileName').innerHTML; WebDav_Delete(cancelfilename);
fromSize=0;
ToSize=0;
setTimeout("clear_upload_barview_function();",100);
return;
}
if(Pause_flag==1){
return;
}else{
if(ToSize>=total_file_size){
fromSize=0;
ToSize=0;
document.getElementById("bar").style.width = 100 + "%";
document.getElementById("bar").innerHTML = document.getElementById("bar").style.width;
setTimeout("clear_upload_barview_function();",800); $("#mWebDav").objWebDav().onLoad(true);
}else{
var bar_length;
bar_length=Math.floor((ToSize/total_file_size)*100);
document.getElementById("bar").style.width = bar_length + "%";
document.getElementById("bar").innerHTML = document.getElementById("bar").style.width;
WebDav_Upload();
}
}
}

补充:FileReader用法:

FileReader对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据

这里File对象可以是来自<input>元素上选择文件后返回的FileList对象:document.getElementById("input").file[0]

  或者使用onchange事件:<input type="file" id='input' onchange='handleFile(this.files)'>

  如果是多个文件,只需要加上一个multiple属性即可:<input type='file' id='input' multiple onchange='handleFile(this.files)'>

也可以来自拖放操作生成的DataTransfer对象,还可以是来自一个HTMLCanvasElement上执行mozGetAsFile()方法后返回的结果。

1)构造函数:reader = FileReader()

2)属性:

  FileReader.error:只读,一个DOMException,表示读取文件时发生的错误

  FileReader.readyState:三个取值

    EMPTY    0  还没有加载任何数据

    LOADING   1  数据正在被加载

    DONE       2  已完成全部的读取请求

  FileReader.result:文件的内容。该属性仅在读取操作完成后才有效,数据的格式取决于使用哪个方法来启动读取操作

3)事件处理:

  FileReader.onabort:处理abort事件。该事件在读取操作被中断时触发

  FileReader.onerror:处理error事件。该事件在读取操作发生错误时触发

  FileReader.onload:处理load事件。该事件在读取完成时触发

  FileReader.onloadstart:处理loadstart事件。该事件在读取开始时触发

  FileReader.onloadend:处理loadend事件。该事件在读取结束时(成功或者失败)触发

  FileReader.onprogress:处理progress事件。该事件在读取Blob时触发

  *****因为FileReader继承自EventTarget,所以这些事件也可以通过addEventListener方法使用*****

4)方法:

  FileReader.abort():中止读取操作。在返回时,readyState为None

  FileReader.readAsArrayBuffer():开始读取指定的Blob中的内容。一旦完成,result属性中保存的将是被读取文件的ArrayBuffer数据对象

  FileReader.readAsDataURL():开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个data:URL格式的字符串以表示所读取的内容

  FileReader.readAsText():开始读取指定的Blob中的内容。一旦完成,result属性中将包含一个字符串用于表示所读取的文件内容

https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

兼容:IE10及以上

js实现分段上传文件的更多相关文章

  1. JS 异步分段上传文件

    为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...

  2. Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

    目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...

  3. Nodejs学习笔记(八)—Node.js + Express 实现上传文件功能(felixge/node-formidable)

    前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...

  4. c#+js 使用formdata上传文件

    如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...

  5. js拖拽上传 文件上传之拖拽上传

    由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...

  6. js无刷新上传文件

    传统的文件上传方式 <form action="" method="POST" enctype="multipart/form-data&quo ...

  7. JS分段上传文件(File)并使用MD5.js加密文件段用来后台校验

    HTML <form method="POST" name="form1" action="/mupload/upload/" enc ...

  8. jquery.form.js ajax提交上传文件

    项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...

  9. js通过formData上传文件,Spring后台处理

    1.前端 var formData = new FormData(); formData.append('file', $("#file").val()); $.ajax({ ur ...

随机推荐

  1. 编译Xposed

    Xposed是Android平台上的有名的Hook工具,用它可以修改函数参数,函数返回值和类字段值等等,也可以用它来进行调试.Xposed有几个部分组成: 修改过的android_art,这个项目修改 ...

  2. Django+xadmin打造在线教育平台(一)

    目录 在线教育平台(一)      在线教育平台(二) 在线教育平台(三)      在线教育平台(四) 在线教育平台(五)      在线教育平台(六) 在线教育平台(七)      在线教育平台( ...

  3. 微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器(一)

    内容: 一.前言 二.相关概念 三.开始工作 四.启动项目起来 五.项目结构 六.设计理念 七.路由 八.部署线上后端服务 同步交流学习社区: https://www.mwcxs.top/page/4 ...

  4. qt捕获全局windows消息

    qt  如何捕获全屏的鼠标事件,这个帖子上面主要讲述了下嵌入式qt怎么抓取系统级消息,不过从这篇文章中我也看到了希望,有个回复说winEventFilter支持这种方式,然后我就顺着这个线索找到了na ...

  5. 《深入理解Java虚拟机》-----第8章 虚拟机字节码执行引擎——Java高级开发必须懂的

    概述 执行引擎是Java虚拟机最核心的组成部分之一.“虚拟机”是一个相对于“物理机”的概念 ,这两种机器都有代码执行能力,其区别是物理机的执行引擎是直接建立在处理器.硬件.指令集和操作系统层面上的,而 ...

  6. .NET Core微服务之基于IdentityServer建立授权与验证服务(续)

    Tip: 此篇已加入.NET Core微服务基础系列文章索引 上一篇我们基于IdentityServer4建立了一个AuthorizationServer,并且继承了QuickStartUI,能够成功 ...

  7. 研究windows下SVN备份及还原恢复方案

    windows下SVN备份方案 备份策略 svn备份一般采用三种方式: 1)svnadmin dump  2)svnadmin hotcopy  3)svnsync.  注意,svn备份不宜采用普通的 ...

  8. 【我们一起写框架】MVVM的WPF框架(四)—DataGrid

    前言 这个框架写到这里,应该有很多同学发现,框架很多地方的细节,其实是违背了MVVM的设计逻辑的. 没错,它的确是违背了. 但为什么明知道违背设计逻辑,还要这样编写框架呢? 那是因为,我们编写的是框架 ...

  9. 浅谈mybatis如何半自动化解耦

    在JAVA发展过程中,涌现出一系列的ORM框架,JPA,Hibernate,Mybatis和Spring jdbc,本系列,将来研究Mybatis. 通过研究mybatis源码,可将mybatis的大 ...

  10. MySQL 笔记整理(19) --为什么我只查一行的语句,也执行这么慢?

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> (本篇内图片均来自丁奇老师的讲解,如有侵权,请联系我删除) 19) --为什么我只查一行的语句,也执行这么慢? 需要说明一下,如果M ...