结一下，JavaWeb前后端常见的几种上传文件的方式：

一、JavaWeb前端上传文件的几种方式：

1、表单上传

最传统的图片上传方式是form表单上传，使用form表单的input[type="file"]控件，打开系统的文件选择对话框，从而达到选择文件并上传的目的。

代码示例如下：

<form action="uploadFile" method="post" 
    enctype="multipart/form-data">
    <label for="file">文件名</label>
    <input id="file" name="file" type="file"/>
    <input type="submit" name="submit" value="提交"/>
</form>

表单上传需要注意以下几点：

（1）提供form表单，method必须是post类型。

（2）form表单的enctype必须是multipart/form-data。

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地，表单数据会编码为“application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码。HTML表单如何打包数据文件是由enctype这个属性决定的。enctype有以下几种取值：

• application/x-www-form-urlencoded：在发送之前编码所有字符（默认）（空格被编码为‘+’，特殊字符被编码为ASCII十六进制字符）。
• multipart/form-data：不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
• text/plain：空格转换为“+”加号，但不对特殊字符编码。

默认enctype=application/x-www-form-urlencoded，所以表单的内容会按URL规则编码，然后根据表单的提交方法：

method='get' 编码后的表单内容附加在请求连接后，

method='post' 编码后的表单内容作为post请求的正文内容。

（3）提供input type="file"上传输入域。

2、Ajax上传

ajax和FormData可实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。通过FormData对象可以更灵活方便地发送表单数据，因为可以独立于表单使用。如果你把表单的编码类型设置为multipart/form-data，则通过FormData传输的数据格式和表单通过submit()方法传输的数据格式相同。

<form>
    <input type="file" name="file" id="file"/>
</form>
<script>
    $("#file").on("change", function() {
        var formData=new FormData();
        formData.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: "uploadFile",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                alert("hahaha");
            }
        });
    })
</script>

ajax无刷新上传的方式，本质上与表单上传无异，只是把表单里的内容提出来采用ajax提交，并且由前端决定请求结果回传后的展示结果。

3、各类插件上传

当上传的需求要求可预览、显示上传进度、中断上传过程、大文件分片上传等等，这时传统的表单上传很难实现这些功能，我们可以借助现有插件完成。

如：百度上传插件Web Upload、jQuery图片预览插件imgPreview、拖拽上传与图像预览插件Dropzone.js等等。

二、JavaWeb后端上传文件的几种方式：

1、使用springMVC原生上传文件方法

（1）首先需要一些简单的配置

<bean id="multipartResolver" class="com.zxm.fileupload.
    UploadCommonsMultipartResolver">
    <!-- 默认编码 -->
    <property name="defaultEncoding" value="utf-8"/>
    <!-- 文件大小最大值 -->
    <property name="maxUploadSize" value="10485760000"/>
    <!-- 内存中的最大值 -->
    <property name="maxInMemorySize" value="40960"/>
</bean>

（2）controller中的代码：

@RequestMapping("upload")
public String upload(HttpServletRequest request) throws 
    IllegalStateException, IOException {
    long  startTime=System.currentTimeMillis();
    
    //将当前上下文初始化给CommonsMutipartResolver（多部分解析器）
    CommonsMultipartResolver multipartResolver=new 
        CommonsMultipartResolver(
        request.getSession().getServletContext());
        
    //检查form中是否有enctype="multipart/form-data"
    
    if(multipartResolver.isMultipart(request)) {
        //将request变成多部分request
        MultipartHttpServletRequest multiRequest=(MultipartHttpServletRequest)request;
        //获取multiRequest 中所有的文件名
        Iterator iter=multiRequest.getFileNames();
        
        while(iter.hasNext()) {
            //一次遍历所有文件
            MultipartFile file=multiRequest.
            getFile(iter.next().toString());
            if(file!=null) {
                String path="E:/upload/"+
                file.getOriginalFilename();
                //上传
                file.transferTo(new File(path));
            }
        }
    }
    
    long endTime=System.currentTimeMillis();
    
    System.out.println("Spring方法的运行时间："
    +String.valueOf(endTime-startTime)+"ms");
    return "success"; 
} 

2、采用file.Transto来保存上传的文件，这是目前自认为最好的上传方式，代码简单，速度快

@RequestMapping("upload")
public String upload(@RequestParam("file")
CommonsMultipartFile file) throws IOException {

 long startTime=System.currentTimeMillis();
 System.out.println("fileName:"+file.getOriginalFilename());
 String path="E:/upload/" + new Date().getTime()+
     file.getOriginalFilename();
     
 File newFile=new File(path);
 //通过CommonsMultipartFile的方法直接写文件
 file.transferTo(newFile);
 
 long endTime=System.currentTimeMillis();
 System.out.println("采用file.Transto的运行时间："
     +String.valueof(endTime-startTime)+"ms");
 return "success";
}

3、采用流的方式上传

此方式又慢又难写

@RequestMapping("upload")
public String upload(@RequestParam("file")
CommonsMultipartFile file) throws IOException {
    
    //用来检测程序运行时间
 long startTime=System.currentTimeMillis();
 System.out.println("fileName:"+file.getOriginalFilename);
 
 try {
     //获取输出流
     OutputStream oStream=new FileOutputStream(
         "E:/upload/"+new Date().getTime() +
         file.getOriginalFilename());
     //获取输入流CommonsMultipartFile中可以直接得到文件的流
     InputStream iStream=file.getInputStream();
     byte[] bts=new byte[1024];
     //一个字节一个字节地读取并写入
     while(iStream.read(bts)!=-1) {
         oStream.write(bts);
     }
     oStream.flush();
     oStream.close();
     iStream.close();
 } catch(FileNotFoundException e) {
     e.printStackTrace();
 }
 
 long endTime=System.currentTimeMillis();
 System.out.println("采用流上传的方式的运行时间："+
     String.valueOf(endTime-startTime)+"ms");
     
 return "success";
}

JavaWeb后台上传的这三种方式中，第二种最优，第一种次之，第三种最不推荐。

avaScript开发——文件夹的上传和下载，JavaScript实现文件夹的上传和下载，JavaScript实现文件夹的上传和下载解决方案，JavaScript实现文件夹的上传和下载思路，JavaScript实现文件夹的上传和下载源码，JavaScript实现文件夹的上传和下载实例，JavaScript实现大文件分块上传和下载，JavaScript实现大文件分片上传和下载，JavaScript实现大文件加密上传和下载，JavaScript实现大文件批量上传和下载，

前端用了JS，JQuery,vue2,vue3,vue-cli,html5,html

网上搜了一下，基本上大部分的文章里面提到的前端JS或VUE或HTML5上传文件夹的方案都是使用JS的API来实现的，也就是html5提供的一个API，也就是chrome提供的API。用是能用，但是不够好用，有很多限制，也不够灵活。不太能够满足用户的实际应用需求，

多多少少还是有点问题，稳定性，灵活性，可扩展性，安全性方面还是有点问题。chrome的每个域名只允许5个TCP连接的限制，这个基本上是一个无法逾越的鸿沟，目前为止网上还没有发现哪家公司或者个人能够突破的。

我们做项目的话个人用户比较少，一般都是行业用户，比如政府，公司，金融，这类企业，他们对用户体验要求较高。就实际项目开发和实施的情况来看，html5或者chrome提供的功能基本上都是不能够满足他们需求的，都需要我们进行定制开发。

文件夹上传，html5提供了API,用户开始用的时候还行，然后就提了要求要求支持断点续传，

断点续传，就是在文件上传的过程中发生了中断，人为因素（暂停）或者不可抗力（断网或者网络差）导致了文件上传到一半失败了。然后在环境恢复的时候，重新上传该文件，而不至于是从新开始上传的。

断点续传的功能是基于分块上传来实现的，把一个大文件分成很多个小块，服务端能够把每个上传成功的分块都落地下来，客户端在上传文件开始时调用接口快速验证，条件选择跳过某个分块。

实现原理，就是在每个文件上传前，就获取到文件MD5取值，在上传文件前调用接口，如果获取的文件状态是未完成，则返回所有的还没上传的分块的编号，然后前端进行条件筛算出哪些没上传的分块，然后进行上传。

当接收到文件块后就可以直接写入到服务器的文件中。

导入项目：
导入到Eclipse：http://www.ncmem.com/doc/view.aspx?id=9da9c7c2b91b40b7b09768eeb282e647
导入到IDEA：http://www.ncmem.com/doc/view.aspx?id=9fee385dfc0742448b56679420f22162
springboot统一配置：http://www.ncmem.com/doc/view.aspx?id=7768eec9284b48e3abe08f032f554ea2

下载示例：

https://gitee.com/xproer/up6-jsp-eclipse/tree/6.5.40/

工程

NOSQL

NOSQL示例不需要任何配置，可以直接访问测试

创建数据表

选择对应的数据表脚本，这里以SQL为例

修改数据库连接信息

访问页面进行测试

文件存储路径

up6/upload/年/月/日/guid/filename

相关问题：
1.javax.servlet.http.HttpServlet错误
2.项目无法发布到tomcat
3.md5计算完毕后卡住
4.服务器找不到config.json文件

相关参考：

文件保存位置

源码工程文档：https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra

源码报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl

OEM版报价单：https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a

产品源代码：https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
授权生成器：https://drive.weixin.qq.com/s?k=ACoAYgezAAwTIcFph1