文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦、缺乏交互、用户体验差。

一、前端代码

英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用HTML5的API,对文件上传进行渐进式增强:

    * iframe上传    * ajax上传    * 进度条    * 文件预览    * 拖放上传

1.1 传统形式

  文件上传的传统形式,是使用表单元素file,参考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html :

  <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" >     <input type="file" id="upload" name="upload" /> <br />     <input type="submit" value="Upload" />   </form>

所有浏览器都支持上面的代码,点击上传按钮后,网页"锁死",用户只能等待上传结束,然后浏览器刷新,跳到表单的action属性指定的网址。

1.2 iframe上传

  用户点击submit时,动态插入一个iframe元素

var form = $("#upload-form");

  form.on('submit',function() {

    // 此处动态插入iframe元素

  });

  var seed = Math.floor(Math.random() * 1000);

  var id = "uploader-frame-" + seed;

  var callback = "uploader-cb-" + seed;

  var iframe = $('<iframe id="'+id+'" name="'+id+'" >');

  var url = form.attr('action');

  form.attr('target', id).append(iframe).attr('action', url + '?iframe=' + callback);

1.3 ajax上传

  HTML5提出了XMLHttpRequest对象的第二版,从此ajax能够上传文件了。这是真正的"异步上传",是将来的主流。

form.on('submit',function() {

    // 此处进行ajax上传

});

 // 检查是否支持FormData

  if(window.FormData) { 

    var formData = new FormData();

    // 建立一个upload表单项,值为上传的文件

    formData.append('upload', document.getElementById('upload').files[0]);

    var xhr = new XMLHttpRequest();

    xhr.open('POST', $(this).attr('action'));

    // 定义上传完成后的回调函数

    xhr.onload = function () {

      if (xhr.status === 200) {

        console.log('上传成功');

      } else {

        console.log('出错了');

      }

    };

    xhr.send(formData);

  }

1.4 进度条

  XMLHttpRequest第二版还定义了一个progress事件,可以用来制作进度条。

//在页面中放置一个HTML元素progress

<progress id="uploadprogress" min="0" max="100" value="0">0</progress>

//定义进度progress事件的回调函数

 xhr.upload.onprogress = function (event) {

    if (event.lengthComputable) {

      var complete = (event.loaded / event.total * 100 | 0);

      var progress = document.getElementById('uploadprogress');

      progress.value = progress.innerHTML = complete;

    }

}

二、后端

  Spring 框架中使用类似CommonsMultipartFile对象处理表二进制文件信息,细心地会发现在利用框架下封装的Multiform接口进行文件上传时,会先把文件传输至tomcat一个指定的work目录之下,然后再传输到指定的路径。小文件上传这个时间延迟基本上可以忽略,但是在大文件上传时,这个上传的速度就很让人头疼,上传过程中的进度信息无法访问。

  因此我们有必要从浏览器请求字节流中解析Multiform协议,实现不依靠框架内置对象,取得用户请求的所有数据,同时,用户上传的大小不受限制,而且在传输过程中,我们可以实时获取传输进度。

参考https://www.cnblogs.com/darkprince/p/5114936.html

2.1 普通Post请求协议及MultiPart协议

  因为一次传输的大文件MultiPart数据包,字节数可能会很大(1G甚至以上),为了获取实时进度信息,以及内存开销控制,我们需要将接收过程分成多段处理,即将数据包分段循环接收(例:每次循环只接收64K数据,期间即可更新当前的进度信息)。本次我们采用Spring框架来实现“大文件传输”功能,要点设计结构图如下:

2.2 源码解析

Filter对象:

  用于负责接收MultiPart原始数据的Filter,用以在Spring内置对象之前接收用户请求。需要在Web.xml中进行配置,Web启动后,该Filter即启动,当用户请求到来时需要判断该MultiPart数据信息是否合法,接收并进行解析。

ServletInputStream/BufferedInputStream对象:

  使用以上两对象,可对本次请求进行按字节流接收。在此可创建比较小的接收缓冲区,依靠BufferedInputStream的read进行分段循环接收。

getBoundarySectFromBuf()函数:

  自定义函数,我们需要该函数从分段缓冲区中分析可能包含的多个Form表单信息,或者部分表单信息,或者二进制文件片段信息。对于表单信息分析后填充表单数据结构,对于二进制文件信息需要写文件。该函数需要完成边接收边解析边写文件的重要工作。

ProgressInfo对象:

  进度信息类,描述了一次上传请求的进度信息。该对象会用来被客户端轮询请求,以获得当前传输大文件过程中的进度信息。

FormPart对象及listFormPart集合:

  FormPart对于单个Form表单的描述。listFormPart为本次请求的全部表单描述集合。即供后续代码调用的全部表单项内容。

Controller层getProgInfo()处理函数:

  该函数将接受来自浏览器的“获得进度信息请求”,并从当前ServletContext公共内存区中找到与Progesss ID对应的进度信息对象ProgressInfo,以XML的形式返回给浏览器。该函数会被客户端轮询请求。

详细代码可以参考:http://blog.ncmem.com/wordpress/2019/08/12/java实现大文件上传/

java上传大文件(局域网环境)的更多相关文章

  1. java上传大文件解决方案

    需求:项目要支持大文件上传功能,经过讨论,初步将文件上传大小控制在10G内,因此自己需要在项目中进行文件上传部分的调整和配置,自己将大小都以10G来进行限制. 第一步: 前端修改 由于项目使用的是BJ ...

  2. java+上传大文件

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  3. java 上传大文件以及文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  4. Java上传大文件夹

    javaweb上传文件 上传文件的jsp中的部分 上传文件同样可以使用form表单向后端发请求,也可以使用 ajax向后端发请求 1.通过form表单向后端发送请求 <form id=" ...

  5. 【Web应用】JAVA网络上传大文件报500错误

    问题描述 当通过 JAVA 网站上传大文件,会报 500 错误. 问题分析 因为 Azure 的 Java 网站都是基于 IIS 转发的,所以我们需要关注 IIS 的文件上传限制以及 requestT ...

  6. edtftpj让Java上传FTP文件支持断点续传

    在用Java实现FTP上传文件功能时,特别是上传大文件的时候,可以需要这样的功能:程序在上传的过程中意外终止了,文件传了一大半,想从断掉了地方继续传:或者想做类似迅雷下载类似的功能,文件太大,今天传一 ...

  7. ASP.NET上传大文件出现网页无法显示的问题

    使用FileUpload上传的时候,默认允许大小是4M,而当小于4M的时候正常运行:当超过4M将显示网页无法显示.解决方法如下: 在web.config中的<system.web>< ...

  8. java上传excel文件及解析

      java上传excel文件及解析 CreateTime--2018年3月5日16:25:14 Author:Marydon 一.准备工作 1.1 文件上传插件:swfupload: 1.2 文件上 ...

  9. vue上传大文件的解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

随机推荐

  1. Web UI自动化测试基础——元素定位(三)

    本篇文章整理了元素定位的基础知识——iframe框架中的元素定位. 一.iframe框架元素定位 iframe是Html页面的内联框架,如果在自动化测试中无法定位到某个元素,那么很有可能是因为该元素在 ...

  2. 2019第二周总结.Java

    本学期开始学习Java课程了,首先我先说说学习Java的感觉吧,它不像C语言程序设计,但是又有语言开发的共同点.学Java语言重点是面向对象的程序设计,更加的适应生活需要和计算机开发的需要. 总的来讲 ...

  3. laravel框架源码分析(一)自动加载

    一.前言 使用php已有好几年,laravel的使用也是有好长时间,但是一直对于框架源码的理解不深,原因很多,归根到底还是php基础不扎实,所以源码看起来也比较吃力.最近有时间,所以开启第5.6遍的框 ...

  4. Ubuntu 16.04简单配置备忘录

    1.几个安装包的地址 1.Linux QQ:https://im.qq.com/linuxqq/index.html 2.网易云音乐:http://s1.music.126.net/download/ ...

  5. [转帖]Windows下cwRsyncServer双机连续同步部署

    Windows下cwRsyncServer双机连续同步部署 https://www.cnblogs.com/nulige/p/7607503.html 找时间做一下测试 应该能更好的实现 自动部署的功 ...

  6. vue视图不更新情况详解

    vue视图不更新情况详解:https://www.jb51.net/article/161371.htm

  7. laravel5.5结合bootstrap上传插件fileinput 上传图片

    引入相关js <script src="{{ asset('bootstrap-fileinput/js/fileinput.js') }}"></script& ...

  8. nginx重新编译安装upload模块

    由于php处理上传会出现超时,并且显示上传进度官方php不支持nginx+php,所以决定让nginx自己处理上传,我本地环境是mac上已经安装过nginx1.8.0,安装方式为brew,所以需要重新 ...

  9. 搜索专题: HDU1312Red and Black

    Red and Black Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  10. 关于css清除浮动

    1.overflow:hidden 较简单,兼容于市面浏览器.负面效果不详.暂不推荐使用.2.定义clear类,并把clear类赋给浮动元素的父级元素. .clear{display:block;ov ...