js实现分段上传文件
使用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实现分段上传文件的更多相关文章
- JS 异步分段上传文件
为了解决大文件上传 (PHP上传最大限制2GB) 同时为了解决文件上传是对服务器造成的压力 可以通过分段上传解决这个问题,这得益于HTML5开发的file API 前台代码: 引用了进度条插件myPr ...
- Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)
目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能---- ...
- Nodejs学习笔记(八)—Node.js + Express 实现上传文件功能(felixge/node-formidable)
前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次 ...
- c#+js 使用formdata上传文件
如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等) 比如: <html> <head> <meta name=" ...
- js拖拽上传 文件上传之拖拽上传
由于项目需要上传文件到服务器,于是便在文件上传的基础上增加了拖拽上传.拖拽上传当然属于文件上传的一部分,只不过在文件上传的基础上增加了拖拽的界面,主要在于前台的交互, 从拖拽的文件中获取文件列表然后调 ...
- js无刷新上传文件
传统的文件上传方式 <form action="" method="POST" enctype="multipart/form-data&quo ...
- JS分段上传文件(File)并使用MD5.js加密文件段用来后台校验
HTML <form method="POST" name="form1" action="/mupload/upload/" enc ...
- jquery.form.js ajax提交上传文件
项目中最近有用到表单提交,是带有图片上传的表单录入,需要ajax异步提交,网上找了好多例子都是只能提交上传字段一个信息的,这里整理一下.表单里有普通文本信息字段也有图片上传字段. 1.jsp代码--引 ...
- js通过formData上传文件,Spring后台处理
1.前端 var formData = new FormData(); formData.append('file', $("#file").val()); $.ajax({ ur ...
随机推荐
- Jdk1.8中的HashMap实现原理
HashMap概述 HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变. HashM ...
- Linux下单机实现Zookeeper集群
安装配置JAVA开发环境 下载ZOOKEEPER zookeeper下载地址 在下载的zookeeper目录里创建3个文件,zk1,zk2,zk3,用于存放每个集群的数据文件. 并在三个目录下创建da ...
- nginx反向代理配置
最近在项目中使用nginx反向代理,根据不同的请求路径,将请求分发到不同服务.下面的示例主要完成如下功能 /prod/路径的请求分发到prod服务 /test/路径的请求分发到test服务 创建文件夹 ...
- Spring Boot 2.0 的快速入门(图文教程)
摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! Spring Boot 2.0 的快速入门(图文教程) 大家都 ...
- Kubernetes知识小普及
大部分概念Kubernetes官网都有详细介绍,Kubernetes中文官网 https://kubernetes.io/zh/docs/tutorials/kubernetes-basics/ 官网 ...
- JAVA 探究NIO
事情的开始 1.4版本开始,java提供了另一套IO系统,称为NIO,(New I/O的意思),NIO支持面向缓冲区的.基于通道的IO操作. 1.7版本的时候,java对NIO系统进行了极大的扩展,增 ...
- centos7 ipaddr 无法查看虚拟机IP解决办法
原因是: CentOS 7 默认是不启动网卡的 解决办法:https://blog.csdn.net/wxx729418277/article/details/79130649
- 2.python中self详解(程序适用于python3版本)
先介绍下Python中的类和实例面向对象最重要的概念就是类(class)和实例(instance),类(class)是抽象的模板,比如学生这个抽象的事物,可以用一个Student类来表示.而实例是根据 ...
- 数据库学习(MySQL):JDBC的简单增删改查实现
本文为原创,转载请注明出处: https://www.cnblogs.com/Tom-shushu/p/9171896.html 这里我们先在数据库建立一个userinfo表: CREATE TABL ...
- React-组件的生命周期详解(含React16版本)
在一个组件的整个生命周期中,通过用户的交互来更新state或者props,重新渲染组件,更新页面的ui.组成一个简单的"状态机". react的生命周期三个阶段: Mounting ...