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

1)获取文件,分段读取

  1. function WebDav_Upload() {
  2. var file = document.getElementById('WebdavFileToUpload').files[0];
  3. if (window.FileReader ){
  4. if(file) {
  5. total_file_size=file.size;
  6. fromSize=ToSize;
  7. ToSize=ToSize+ 4 * 1024;
  8. if(ToSize>file.size){
  9. ToSize=file.size;
  10. }
  11.  
  12. var reader = new FileReader();
  13. var blob;
  14. if(file.webkitSlice) {
  15. blob = file.webkitSlice(fromSize, ToSize);
  16. }else if (file.mozSlice) {
  17. blob = file.mozSlice(fromSize, ToSize );
  18. }else{
  19. blob=file.slice(fromSize,ToSize);
  20. }
  21. reader.onprogress=function(p){
  22. if (p.loaded){
  23. }else {
  24. }
  25. }
  26. reader.onloadend = function(){
  27. if(isBrowser()=='IE'){
  28. WebDav_PutSyncXML_IE11(Path_Name+file.name,file.type,fromSize,ToSize,file.size,reader.result);
  29. }else{
  30. WebDav_PutSyncXML(Path_Name+file.name,file.type,fromSize,ToSize,file.size,reader.result);
  31. }
  32. if (reader.error){
  33. } else {
  34. }
  35. }
  36. if(isBrowser()=='IE'){
  37. reader.readAsArrayBuffer(blob);
  38. }else{
  39. reader.readAsBinaryString(blob);
  40. }
  41. }
  42. }else{
  43. showAlert("lupdateBrowser");
  44. return;
  45. }
  46. }

2)使用ajax 上传文件

  1. function WebDav_PutSyncXML(xmlName,FileType,FileDataFrom,FileDataTo,FileDataTotal,FileData) {
  2. var host = window.location.protocol + "//" + window.location.host ;
  3. var xmlNametemp=xmlName.replace(new RegExp("#","gm"),"%23");
  4. var url = host + "/webdav" + xmlNametemp;
  5. var content;
  6. content=$.ajax( {
  7. type: "PUT",
  8. processData: false,
  9. contentType: false,
  10. xhr: function() {
  11. var xhr = $.ajaxSettings.xhr();
  12. if (!xhr.sendAsBinary) {
  13. xhr.legacySend = xhr.send;
  14. xhr.sendAsBinary = function(string) {
  15. var bytes = Array.prototype.map.call(string, function(c) {
  16. return c.charCodeAt(0) & 0xff;
  17. });
  18. this.legacySend(new Uint8Array(bytes).buffer);
  19. };
  20. }
  21. xhr.send = xhr.sendAsBinary;
  22. return xhr;
  23. },
  24. 'beforeSend': function(xhr) {
  25. xhr.setRequestHeader("Authorization",webdav_getAuthHeader("PUT"));
  26. xhr.setRequestHeader("Content-Type", FileType);
  27. if(FileDataFrom!=0) {
  28. xhr.setRequestHeader("Content-Range", "bytes "+FileDataFrom+"-"+FileDataTo+"/"+FileDataTotal);
  29. }
  30. },
  31.  
  32. url: url,
  33. data: FileData,
  34. async: true,
  35. success:function(data, textStatus) {
  36. WebDav_Upload_Ondoing();
  37. },
  38. complete: function(XMLHttpRequest, textStatus) {
  39. },
  40. error: function(XMLHttpRequest, textStatus, errorThrown) {
  41. }
  42. }).responseXML;
  43. return content;
  44.  
  45. }

3)处理上传进度条

  1. function WebDav_Upload_Ondoing() {
  2. if(Cancel_flag==1){
  3. var cancelfilename=document.getElementById('webdavuploadschedule_FileName').innerHTML;
  4.  
  5. WebDav_Delete(cancelfilename);
  6. fromSize=0;
  7. ToSize=0;
  8. setTimeout("clear_upload_barview_function();",100);
  9. return;
  10. }
  11. if(Pause_flag==1){
  12. return;
  13. }else{
  14. if(ToSize>=total_file_size){
  15. fromSize=0;
  16. ToSize=0;
  17. document.getElementById("bar").style.width = 100 + "%";
  18. document.getElementById("bar").innerHTML = document.getElementById("bar").style.width;
  19. setTimeout("clear_upload_barview_function();",800);
  20.  
  21. $("#mWebDav").objWebDav().onLoad(true);
  22. }else{
  23. var bar_length;
  24. bar_length=Math.floor((ToSize/total_file_size)*100);
  25. document.getElementById("bar").style.width = bar_length + "%";
  26. document.getElementById("bar").innerHTML = document.getElementById("bar").style.width;
  27. WebDav_Upload();
  28. }
  29. }
  30. }

补充: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. Jdk1.8中的HashMap实现原理

    HashMap概述 HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变. HashM ...

  2. Linux下单机实现Zookeeper集群

    安装配置JAVA开发环境 下载ZOOKEEPER zookeeper下载地址 在下载的zookeeper目录里创建3个文件,zk1,zk2,zk3,用于存放每个集群的数据文件. 并在三个目录下创建da ...

  3. nginx反向代理配置

    最近在项目中使用nginx反向代理,根据不同的请求路径,将请求分发到不同服务.下面的示例主要完成如下功能 /prod/路径的请求分发到prod服务 /test/路径的请求分发到test服务 创建文件夹 ...

  4. Spring Boot 2.0 的快速入门(图文教程)

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! Spring Boot 2.0 的快速入门(图文教程) 大家都 ...

  5. Kubernetes知识小普及

    大部分概念Kubernetes官网都有详细介绍,Kubernetes中文官网 https://kubernetes.io/zh/docs/tutorials/kubernetes-basics/ 官网 ...

  6. JAVA 探究NIO

    事情的开始 1.4版本开始,java提供了另一套IO系统,称为NIO,(New I/O的意思),NIO支持面向缓冲区的.基于通道的IO操作. 1.7版本的时候,java对NIO系统进行了极大的扩展,增 ...

  7. centos7 ipaddr 无法查看虚拟机IP解决办法

    原因是: CentOS 7 默认是不启动网卡的 解决办法:https://blog.csdn.net/wxx729418277/article/details/79130649

  8. 2.python中self详解(程序适用于python3版本)

    先介绍下Python中的类和实例面向对象最重要的概念就是类(class)和实例(instance),类(class)是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示.而实例是根据 ...

  9. 数据库学习(MySQL):JDBC的简单增删改查实现

    本文为原创,转载请注明出处: https://www.cnblogs.com/Tom-shushu/p/9171896.html 这里我们先在数据库建立一个userinfo表: CREATE TABL ...

  10. React-组件的生命周期详解(含React16版本)

    在一个组件的整个生命周期中,通过用户的交互来更新state或者props,重新渲染组件,更新页面的ui.组成一个简单的"状态机". react的生命周期三个阶段: Mounting ...