手把手教你前端的各种文件上传攻略和大文件断点续传

在前面

今年国庆假期终于可以憋在家里了不用出门了，不用出去看后脑了，真的是一种享受。这么好的光阴怎么浪费，睡觉、吃饭、打豆豆这怎么可能（耍多了也烦），完全不符合我们程序员的作风，赶紧起来把文章写完。

这篇文章比较基础，在国庆期间的业余时间写的，这几天又完善了下，力求把更多的前端所涉及到的关于文件上传的各种场景和应用都涵盖了,若有疏漏和问题还请留言斧正和补充。

自测读不读

以下是本文所涉及到的知识点，break or continue ?

文件上传原理
最原始的文件上传
使用 koa2 作为服务端写一个文件上传接口
单文件上传和上传进度
多文件上传和上传进度
拖拽上传
剪贴板上传
大文件上传之分片上传
大文件上传之断点续传
node 端文件上传

原理概述

原理很简单，就是根据 http 协议的规范和定义，完成请求消息体的封装和消息体的解析，然后将二进制内容保存到文件。

我们都知道如果要上传一个文件，需要把 form 标签的enctype设置为multipart/form-data,同时method必须为post方法。

那么multipart/form-data表示什么呢？

multipart互联网上的混合资源，就是资源由多种元素组成，form-data表示可以使用HTML Forms 和 POST 方法上传文件，具体的定义可以参考RFC 7578。

multipart/form-data 结构

看下 http 请求的消息体

请求头：

Content-Type: multipart/form-data; boundary=----WebKitFormBoundaryDCntfiXcSkPhS4PN 表示本次请求要上传文件，其中boundary表示分隔符，如果要上传多个表单项，就要使用boundary分割，每个表单项由———XXX开始，以———XXX结尾。

消息体- Form Data 部分

每一个表单项又由Content-Type和Content-Disposition组成。

Content-Disposition: form-data 为固定值，表示一个表单元素，name 表示表单元素的名称，回车换行后面就是name的值，如果是上传文件就是文件的二进制内容。

Content-Type：表示当前的内容的 MIME 类型，是图片还是文本还是二进制数据。

解析

客户端发送请求到服务器后，服务器会收到请求的消息体，然后对消息体进行解析，解析出哪是普通表单哪些是附件。

可能大家马上能想到通过正则或者字符串处理分割出内容，不过这样是行不通的，二进制buffer转化为string,对字符串进行截取后，其索引和字符串是不一致的，所以结果就不会正确，除非上传的就是字符串。

不过一般情况下不需要自行解析，目前已经有很成熟的三方库可以使用。

至于如何解析，这个也会占用很大篇幅，后面的文章在详细说。

最原始的文件上传

使用 form 表单上传文件

在 ie时代，如果实现一个无刷新的文件上传那可是费老劲了，大部分都是用 iframe 来实现局部刷新或者使用 flash 插件来搞定，在那个时代 ie 就是最好用的浏览器（别无选择）。

DEMO

这种方式上传文件，不需要 js ，而且没有兼容问题，所有浏览器都支持，就是体验很差，导致页面刷新，页面其他数据丢失。

HTML

 <form method="post" action="http://localhost:8100" enctype="multipart/form-data">

        选择文件:
            <input type="file" name="f1"/> input 必须设置 name 属性，否则数据无法发送<br/>
<br/>
            标题：<input type="text" name="title"/><br/><br/><br/>

        <button type="submit" id="btn-0">上 传</button>

</form>

复制代码

文件上传接口

服务端文件的保存基于现有的库koa-body结合 koa2实现服务端文件的保存和数据的返回。

在项目开发中，文件上传本身和业务无关，代码基本上都可通用。

在这里我们使用koa-body库来实现解析和文件的保存。

koa-body 会自动保存文件到系统临时目录下，也可以指定保存的文件路径。

然后在后续中间件内得到已保存的文件的信息，再做二次处理。

ctx.request.files.f1 得到文件信息，f1为input file 标签的 name
获得文件的扩展名，重命名文件

NODE

/**
 * 服务入口
 */
var http = require('http');
var koaStatic = require('koa-static');
var path = require('path');
var koaBody = require('koa-body');//文件保存库
var fs = require('fs');
var Koa = require('koa2');

var app = new Koa();
var port = process.env.PORT || '8100';

var uploadHost= `http://localhost:${port}/uploads/`;

app.use(koaBody({
    formidable: {
        //设置文件的默认保存目录，不设置则保存在系统临时目录下  os
        uploadDir: path.resolve(__dirname, '../static/uploads')
    },
    multipart: true // 开启文件上传，默认是关闭
}));

//开启静态文件访问
app.use(koaStatic(
    path.resolve(__dirname, '../static') 
));

//文件二次处理，修改名称
app.use((ctx) => {
    var file = ctx.request.files.f1;//得道文件对象
    var path = file.path;
    var fname = file.name;//原文件名称
    var nextPath = path+fname;
    if(file.size>0 && path){
        //得到扩展名
        var extArr = fname.split('.');
        var ext = extArr[extArr.length-1];
        var nextPath = path+'.'+ext;
        //重命名文件
        fs.renameSync(path, nextPath);
    }
    //以 json 形式输出上传文件地址
    ctx.body = `{
        "fileUrl":"${uploadHost}${nextPath.slice(nextPath.lastIndexOf('/')+1)}"
    }`;
});

/**
 * http server
 */
var server = http.createServer(app.callback());
server.listen(port);
console.log('demo1 server start ......   ');
复制代码

CODE

https://github.com/Bigerfe/fe-learn-code/

JSP 可以与 HTML form 标签一起使用，来允许用户上传文件到服务器。上传的文件可以是文本文件或图像文件或任何文档。

我们使用 Servlet 来处理文件上传，使用到的文件有：

upload.jsp : 文件上传表单。
message.jsp : 上传成功后跳转页面。
UploadServlet.java : 上传处理 Servlet。
需要引入的 jar 文件：commons-fileupload-1.3.2、commons-io-2.5.jar。

结构图如下所示：

接下来我们详细介绍。

创建一个文件上传表单

下面的 HTML 代码创建了一个文件上传表单。以下几点需要注意：

表单 method 属性应该设置为 POST 方法，不能使用 GET 方法。
表单 enctype 属性应该设置为 multipart/form-data.
表单 action 属性应该设置为在后端服务器上处理文件上传的 Servlet 文件。下面的实例使用了 UploadServlet Servlet 来上传文件。
上传单个文件，您应该使用单个带有属性 type="file" 的 <input .../> 标签。为了允许多个文件上传，请包含多个 name 属性值不同的 input 标签。输入标签具有不同的名称属性的值。浏览器会为每个 input 标签关联一个浏览按钮。

upload.jsp 文件代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上传实例 - 菜鸟教程</title></head><body><h1>文件上传实例 - 菜鸟教程</h1><form method="post" action="/TomcatTest/UploadServlet" enctype="multipart/form-data">

选择一个文件:<input type="file" name="uploadFile" />

编写后台 Servlet

以下是 UploadServlet 的源代码，同于处理文件上传，在这之前我们先确保依赖包已经引入到项目的 WEB-INF/lib 目录下：

下面的实例依赖于 FileUpload，所以一定要确保在您的 classpath 中有最新版本的 commons-fileupload.x.x.jar 文件。可以从http://commons.apache.org/proper/commons-fileupload/ 下载。
FileUpload 依赖于 Commons IO，所以一定要确保在您的 classpath 中有最新版本的 commons-io-x.x.jar 文件。可以从http://commons.apache.org/proper/commons-io/ 下载。

你可以直接下载本站提供的两个依赖包：

commons-fileupload-1.3.2.jar
commons-io-2.5.jar

UploadServlet 的源代码如下所示：

package com.runoob.test;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.util.List;

import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;import org.apache.commons.fileupload.disk.DiskFileItemFactory;import org.apache.commons.fileupload.servlet.ServletFileUpload;

/**

* Servlet implementation class UploadServlet

*/@WebServlet("/UploadServlet")public class UploadServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

// 上传文件存储目录

private static final String UPLOAD_DIRECTORY = "upload";

// 上传配置

private static final int MEMORY_THRESHOLD = 1024 * 1024 * 3; // 3MB

private static final int MAX_FILE_SIZE = 1024 * 1024 * 40; // 40MB

private static final int MAX_REQUEST_SIZE = 1024 * 1024 * 50; // 50MB

/**

* 上传数据及保存文件

protected void doPost(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

// 检测是否为多媒体上传

if (!ServletFileUpload.isMultipartContent(request)) {

// 如果不是则停止

PrintWriter writer = response.getWriter();

writer.println("Error: 表单必须包含 enctype=multipart/form-data");

writer.flush();

return;

}

// 配置上传参数

DiskFileItemFactory factory = new DiskFileItemFactory();

// 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中

factory.setSizeThreshold(MEMORY_THRESHOLD);

// 设置临时存储目录

factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

ServletFileUpload upload = new ServletFileUpload(factory);

// 设置最大文件上传值

upload.setFileSizeMax(MAX_FILE_SIZE);

// 设置最大请求值 (包含文件和表单数据)

upload.setSizeMax(MAX_REQUEST_SIZE);

// 构造临时路径来存储上传的文件

// 这个路径相对当前应用的目录

String uploadPath = getServletContext().getRealPath("./") + File.separator + UPLOAD_DIRECTORY;

// 如果目录不存在则创建

File uploadDir = new File(uploadPath);

if (!uploadDir.exists()) {

uploadDir.mkdir();

}

try {

// 解析请求的内容提取文件数据

@SuppressWarnings("unchecked")

List<FileItem> formItems = upload.parseRequest(request);

if (formItems != null && formItems.size() > 0) {

// 迭代表单数据

for (FileItem item : formItems) {

// 处理不在表单中的字段

if (!item.isFormField()) {

String fileName = new File(item.getName()).getName();

String filePath = uploadPath + File.separator + fileName;

File storeFile = new File(filePath);

// 在控制台输出文件的上传路径

System.out.println(filePath);

// 保存文件到硬盘

item.write(storeFile);

request.setAttribute("message",

"文件上传成功!");

}

} catch (Exception ex) {

request.setAttribute("message",

"错误信息: " + ex.getMessage());

}

// 跳转到 message.jsp

getServletContext().getRequestDispatcher("/message.jsp").forward(

request, response);

}}

message.jsp 文件代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>文件上传结果</title></head><body>

<h2>${message}</h2>

</center></body></html>

编译和运行 Servlet

编译上面的 Servlet UploadServlet，并在 web.xml 文件中创建所需的条目，如下所示：

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

id="WebApp_ID" version="2.5">

<display-name>UploadServlet</display-name>

<servlet-name>UploadServlet</servlet-name>

<servlet-class>com.runoob.test.UploadServlet</servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>UploadServlet</servlet-name>

<url-pattern>/TomcatTest/UploadServlet</url-pattern>

</servlet-mapping></web-app>

现在尝试使用您在上面创建的 HTML 表单来上传文件。当您在浏览器中访问：http://localhost:8080/TomcatTest/upload.jsp ，演示如下所示：

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

一步，先写html或jsp页面，写一个form，enctype设置为multipart/form-data，写两个input，一个type为file，一个type为submit，type的值可以用双引号，也可不用。详细代码如下：<form action="uploadServlet" enctype="multipart/form-data">

</form>

第二步，在web.xml中设置servlet和servlet mapping，并在servlet中设置multipart-config，设置允许上传文件的最大长度，注意单位为字节，样例中约为10M和20M。

第三步，在servlet中处理文件上传，使用 request.getPart("file")方法获取part，再通过part.getSubmittedFileName获取上传文件名，使用part.write方法写文件到服务中，注意路径问题，可以直接使用绝对路径。

对于linux中使用tomcat，可能还需要配置tomcat的servlet.xml中的UMASK="0022"，修改前为0027。

以上便是我分享的内容，感谢您的阅读，非常欢迎并期待您在评论区留下宝贵的意见和建议。如果你在处理数据时遇到了类似的问题，欢迎随时私信我，我将竭诚为你提供帮助。同时，如果你对数据处理领域充满热情，也欢迎你与我私信交流，期待与你共同探讨、学习和进步，期待与您的每一次交流。

在线咨询

上一篇：问题：HTML中表示文字粗体的标记除了使用<strong>外，还可以使用
下一篇：HTML 中 target 属性的精彩应用

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。