1.文件上传

2.后端文件上传

两种方案:

兼容性较好的commons-fileupload，支持所有版本的Servlet，即所有版本的Tomcat

优点:
- 兼容性
缺点
- 需要外部jar，比较麻烦。代码处理也麻烦。

使用Servlet3.0 (Tomcat7之后)之后的文件上传方案。

优点:
- 代码简单不需要外部依赖。
缺点:
- 兼容性差—点

文件上传必须配置注解：doPost方法

@MultipartConfig（）

localtion：设置文件上传的存储的临时文件

fileSizeThreshold：文件大小超过规定则存在临时文件

maxFileSize 单个文件的最大值

maxRequestSize一个请求的最大值

获取上传的文件对象，参数是上传文件的key Part file = req.getPart("file");

设置文件的保存路径将文件保存到项目的运行目录下
private SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/mm/dd"); //根据日期每天生成不同的目录进行存储，同一个目录文件多会卡顿 String format = sdf.format(new Date()); String realPath = req.getServletContext().getRealPath("/img")+ format;

给文件重命名：因为相同文件名是不能保存的
file.getSubmittedFileName();获取文件名

获得旧文件的尾缀oldName：

生成新文件newName

保存文件file.write(realPath+newName);

生成文件的访问路径//"http://localhost:8081/fileupload/img"+format+newName
String url = req.getScheme() + "://" +req.getServerName() + ":" + req.getServerPort() + req.getContextPath() + "/img" + format + newName;

package com.jason.fileupload.servlet;import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.Part;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;@WebServlet(urlPatterns = "/fileupload")
//这个注解用来配置文件的上传信息
//localtion上传文件的临时保存目录：因为文件边读边写的，不可能一下只把1g的东西加载到内存，要一个临时文件边读边写
//fileSizeThreshold,文件临时存储大小的临界值，比如说超过1024才存到临时文件
//maxFileSize 单个文件的最大值
//maxRequestSize整个请求的最大值，一个请求可以选多个文件，这个请求的最大值@MultipartConfig(location = "C:\\Users\\25139\\Desktop",fileSizeThreshold = 1024)
public class FileuploadServlet extends HttpServlet {/*** 1.文件上传必须是post请求* 2.文件上传的解析也可以使用io流** @param req* @param resp* @throws ServletException* @throws IOException*///对文件夹进行分类,按日期分类，别少了//private SimpleDateFormat sdf = new SimpleDateFormat("/yyyy/mm/dd");@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//1.提取请求中的不同参数String username = req.getParameter("username");System.out.println("username="+username);//2.获取上传文件的保存路径fastDFS,或者是购买云服务商的对象存储服务oos。//将文件保存到项目的运行目录下//绝对路径下的/imgString format = sdf.format(new Date());String realPath = req.getServletContext().getRealPath("/img")+ format;//这个路径可能不存在，如果不存在，就创建这个路径File folder = new File(realPath);if (!folder.exists()){folder.mkdirs();}//3.获取上传的文件对象，参数是上传文件的keyPart file = req.getPart("file");//4.给文件重命名：因为相同文件名是不能保存的//首先要获取旧的文件名，从这个旧的文件名中获取后缀，在放到新的文件名中String submittedFileName = file.getSubmittedFileName();//获取文件名的后缀.jpg .pngString suffix = submittedFileName.substring(submittedFileName.lastIndexOf("."));//生产新的文件名String newName = UUID.randomUUID().toString() + suffix;//5.保存文件，参数是文件路径file.write(realPath+newName);//6.生成文件的访问路径//"http://localhost:8081/fileupload/img"+format+newName//String url =//获取请求协议req.getScheme() + "://" +//获取服务器名称req.getServerName() + ":" +//获取端口req.getServerPort() +//获取上下文路径（项目名称）req.getContextPath() +"/img" + format + newName;}
}

3.前端两种文件上传方式

3.1表单提交方式

3.2ajax提交数据

javascript有files属性

//【0】转javascript有个属性files拿得到所有文件【0】表示单个文件
        let file = $("#file")[0].files[0];
        //创建formData 对象用来保存参数
        let formData = new FormData();
        formData.append("username",username);
        formData.append("file",file);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文件上传</title><script src="jquery-2.1.0.js"></script>
</head>
<body>
<form action="/file_upload/fileupload" method="post" enctype="multipart/form-data"><input type="file" name="file"><br><input type="text" name="username" value="lisi"><input type="submit" value="提交">
</form><hr>
<div><input type="file" id="file" ><br><input type="text" id="username"><br><input type="button" value="提交" onclick="uploadFile()">
</div><script>function uploadFile() {//1.采集上传数据//获取普通字段let username = $("#username").val();//获取上传文件//【0】转javascript有个属性files拿得到所有文件【0】let file = $("#file")[0].files[0];//创建formData 对象用来保存参数let formData = new FormData();formData.append("username",username);formData.append("file",file);$.ajax({type:"post",url:"/file_upload/fileupload",data:formData,contentType:false,processData:false,success:function (msg) {}})}
</script>
</body>
</html>

二阶段补充：文件上传服务端处理，后端文件上传、前端两种文件上传方式相关推荐

Vue使用微信录音并上传服务端
在微信公众号或者微信h5的网页开发中,会用到录音等功能,在微信里面使用微信录音会比较好一点,不用去设置ios和android的h5录音兼容性,并且h5的其他录音js文件可能不兼容微信浏览器等,所以vu ...
基于python的selenium两种文件上传方式
方法一.input标签上传如果是input标签,可以直接输入路径,那么可以直接调用send_keys输入路径. 方法二.非input标签上传这种上传方式需要借助第三方工具,主要有以下三种情 ...
两种方法上传本地文件到github
自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...
传奇服务器脚本文件在哪个文件夹,传奇服务端每个文件夹的含义
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 D:\mirserver/GameCenter ----- 游戏控制器 D:\mirserver\DBServer/DBServer ----人物在游戏内 ...
通过设置svn服务端钩子强制提交注释和限制指定类型文件提交
通过设置svn服务端钩子强制提交注释和限制指定类型文件提交 svn钩子下载链接:强制提交注释和限制指定类型文件提交的svn钩子
服务器文件夹是什么文件夹,传奇服务端每个文件夹的含义
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 D:\mirserver/GameCenter ----- 游戏控制器 D:\mirserver\DBServer/DBServer ----人物在游戏内 ...
服务端（后端）接口自动化测试框架
服务端(后端)接口自动化测试框架,梳理如下: 如有问题请评论区下方留言,看到会及时回复.(分层中再加一个allure-results文件夹)
学C++就学服务端，先把apue和unp两卷看了，接着libevent，出来找工作应该没问题
学C++就学服务端,先把apue和unp两卷看了,接着libevent,出来找工作应该没问题
固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异
固态硬盘和机械硬盘的比较和SQLSERVER在两种硬盘上的性能差异在看这篇文章之前可以先看一下下面的文章: SSD小白用户收货!SSD的误区如何解决这样配会损失性能?实测6种特殊装机方式听说固态 ...

二阶段补充：文件上传服务端处理，后端文件上传、前端两种文件上传方式