返回顶部
首页 > 资讯 > 后端开发 > Python >JavaWeb简单文件上传流程的实战记录
  • 761
分享到

JavaWeb简单文件上传流程的实战记录

2024-04-02 19:04:59 761人浏览 薄情痞子

Python 官方文档:入门教程 => 点击学习

摘要

目录引言前端上传文件后端接受文件总结 引言 这里实现一个简单的图片上传功能,主要是熟悉这个文件上传的交互流程。关于更复杂的文件上传,如大文件的切片上传、断点续传等,这里不做

引言

这里实现一个简单的图片上传功能,主要是熟悉这个文件上传的交互流程。关于更复杂的文件上传,如大文件的切片上传、断点续传等,这里不做过多介绍。

前端上传文件

首先在前端创建一个页面,这里我们选择通过fORM表单的形式上传文件。在选择时,使用input标签中 的file类型就可以自动的选择本地文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传一张图片</title>
</head>
<body>
<form action="upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="MyImage">
    <input type="submit" value="提交图片">
</form>
</body>
</html>

代码解释

  • 在form标签中,action属性后写入表单数据上传的URL地址,如果不写,默认上传到当前页面,这里我们写成服务器解析的地址@WEBServlet("/upload")。
  • method属性中我们设为POST方法,即提交表单数据的方法,也就是前面我们说的构造Http请求的方法,并且POST传输的数据量大,可视为不受限制。
  • enctype=“multipart/form-data”,这个属性的作用是将表单数据编码格式置为multipart/form-data类型,这个编码类型会对文件内容在上传时进行处理,以便服务器解析文件的类型和内容。

enctype属性:
application/x-www=form-urlencoded:默认方式,只处理表单域中的 value 属性值,将表单域中的值处理成 URL 编码方式;
multipart/form-data:以二进制流的方式处理表单数据,除了表单域中的 value 属性值,还会处理表单域的文件内容,将其封装到请求参数中,不会对字符编码;
text/plain:将空格转换为+号,其它字符不做编码处理,适用于通过表单发送邮件。

小结

  • 前端文件上传实际是文件内容的传递,是数据的传递,并非我们常用的文件的拷贝与复制操作。
  • 传递的过程中药进行编码来制定数据发送的规则,方便后端能够实现一套对应的解析规则来解析。
  • 传递的数据规则里面应该包含文件的基本信息,如文件名和文件类型,方便后端解析时能写出正确格式的文件。

后端接受文件

在服务器这边处理请求,并将请求中的文件取出并重新保存,最后将代码部署到Tomcat上.

在解析请求中的文件时,需要用到Servlet中的getPart方法.此方法的参数是对应的文件名name

在前端上传文件的时候,可以一次选择多个文件上传,其中每个文件,会被包装成一个Part对象.每个文件都会有自己的文件名name,服务器这边就可以根据文件名来找到对应的Part,在Part中就包含了对应文件信息。

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.IOException;
@MultipartConfig
@WebServlet("/upload")
public class UploadServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1.从请求对象中,读取出Part对象
        Part part =req.getPart("MyImage");
        //2.读取到Part 对象中的一些参数
        System.out.println(part.getSubmittedFileName()); // 上传文件真实的文件名
        System.out.println(part.getContentType()); // 文件的类型
        System.out.println(part.getSize()); // 文件的大小

        //3.把文件写入到指定的目录中
        part.write("c:/temp/MyImage.jpg");
        //4.返回一个响应,通知用户上传成功
        resp.getWriter().write("upload OK !");
    }
}

代码解释:

  • 接受文件上传的Servlet,必须有@MultipartConfig注解,否则Servlet不能正确的读取请求中的文件内容
  • @WebServlet("/upload")这里的/upload和前端form标签中的action属性的值upload正好对应了起来。action属性会将form表单中的数据发送到对应的URL中,前端将URL设为upload,那么后端在构造url的时候也必须和前端的对应起来。否则访问不了Tomcat.
  • 在Servlet中重写的具体是哪个方法也要和前端method属性对应起来,前端用的是Post方法,那么后端在Servlet中重写的就是doPost方法.
  • 在重写的方法中,我们首先要通过文件名name获取到对应的Part对象。前端文件名是MyImage,那么这里的参数就必须是MyImage。
  • 获得对象后,就可以通过Servlet内置的一些方法来获得文件的参数信息,例如文件名,文件类型,文件大小等。
  • 然后通过part.write()方法使文件持久化,也就是将文件保存下来,写入指定的目录中。这个方法的参数就是想要保存的路径
  • 最后可以返回一个响应,通知客户端上传成功。

在浏览器中输入URL,发送请求,开始上传文件

上传成功

在本地对应的路径中,可以看到被上传的文件

总结 

到此这篇关于javaweb简单文件上传的文章就介绍到这了,更多相关JavaWeb文件上传流程内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaWeb简单文件上传流程的实战记录

本文链接: https://lsjlt.com/news/144594.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaWeb简单文件上传流程的实战记录
    目录引言前端上传文件后端接受文件总结 引言 这里实现一个简单的图片上传功能,主要是熟悉这个文件上传的交互流程。关于更复杂的文件上传,如大文件的切片上传、断点续传等,这里不做...
    99+
    2024-04-02
  • javaWeb实现简单文件上传
    本文实例为大家分享了javaWeb实现简单文件上传的具体代码,供大家参考,具体内容如下 1.先导入两个包:commons-fileupload-1.3.3.jar,commons-i...
    99+
    2024-04-02
  • JavaWeb文件上传流程
    目录JavaWeb文件上传做一个简单的用户管理系统先上效果数据表准备Jar文件准备项目结构简介JavaWeb文件上传 本文我们学习JavaWeb中最重要的技术之一,文件上传,该案例我...
    99+
    2024-04-02
  • JavaWeb实现简单上传文件功能
    本文实例为大家分享了JavaWeb实现上传文件功能的具体代码,供大家参考,具体内容如下 基本思想:网站服务器的内部除了有Web应用,还有文件系统,客户端向网站上传文件就是将文件以流的...
    99+
    2024-04-02
  • JavaWeb实现简单文件上传功能
    本文实例为大家分享了JavaWeb实现简单文件上传的具体代码,供大家参考,具体内容如下 1.概述 通常浏览器上传的所有参数,我们可以通过request对象的getParameter ...
    99+
    2024-04-02
  • JavaWeb怎么实现简单上传文件功能
    这篇文章主要介绍了JavaWeb怎么实现简单上传文件功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaWeb怎么实现简单上传文件功能文章都会有所收获,下面我们一起来看看吧。基本思想:网站服务器的内部除了...
    99+
    2023-07-02
  • JavaWeb怎么实现简单文件上传功能
    这篇文章主要讲解了“JavaWeb怎么实现简单文件上传功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaWeb怎么实现简单文件上传功能”吧!1.概述通常浏览器上传的所有参数,我们可以...
    99+
    2023-07-02
  • JavaWeb 文件的上传和下载功能简单实现代码
    一、文件的上传和下载1、文件上传的原理分析     1、文件上传的必要前提:          a、提供for...
    99+
    2023-05-31
    java web 文件上传
  • 简单实现Android文件上传
    文件上传在B/S应用中是一种十分常见的功能,那么在Android平台下是否可以实现像B/S那样的文件上传功能呢?答案是肯定的。下面是一个模拟网站程序上传文件的例子。 首先新...
    99+
    2022-06-06
    Android
  • SpringBoot简单实现文件上传
    目录1.创建SpringBoot项目2.修改application.properties配置文件3.编写控制器UserController类4.编写前端页面index.html5.效...
    99+
    2024-04-02
  • Python+django实现简单的文件上传
    今天分享一下Django实现的简单的文件上传的小例子。 步骤 •创建Django项目,创建Django应用 •设计模型 •处理urls.py 以及views.py ...
    99+
    2022-06-04
    文件上传 简单 Python
  • JavaWeb实现文件的上传与下载
    JavaWeb实现文件的上传与下载,供大家参考,具体内容如下 第一步:导包 导入commons-fileupload-1.3.3.jar和commons-io-2.4.jar两个依赖...
    99+
    2024-04-02
  • Servlet实现简单文件上传功能
    本文实例为大家分享了Servlet文件上传的具体代码,供大家参考,具体内容如下两点要素: 表单提交方式必须是post 2.enctype一定要是multipart/form-data。 enctype的默认值是application/x-w...
    99+
    2023-05-30
    servlet 文件上传 实现简单
  • vue3+koa实现文件上传功能的全过程记录
    目录前言:技术引用:前端实现后台实现:引入koa-body,并注册中间件:引入koa-static 进行静态资源访问前台回显图片:遇到的问题:已解决:Token验证问题:proxy代...
    99+
    2023-01-04
    vue进行文件上传 vue3 koa文件上传 vue3 koa
  • Spring Boot简单实现文件上传功能
    目录前言后端处理物理路径和虚拟路径映射前言 前端处理 通过form表单来上传文件提交方式为postenctype格式为"multipart/form-data"i...
    99+
    2024-04-02
  • 一次简单的Oracle恢复Case实战记录
    发现问题 某网友的数据库由于坏盘了,并且存储掉电,导致数据库无法open了。单看其数据库alert log的错误来看,是非常之简单的,如下: Fri Oct 26 10:33:53 2018 Recov...
    99+
    2024-04-02
  • nodejs如何实现简单的文件上传功能
    这篇文章主要为大家展示了“nodejs如何实现简单的文件上传功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“nodejs如何实现简单的文件上传功能”这篇文章吧。首先需要大家看一下目录结构,然后...
    99+
    2023-06-29
  • vue上传文件formData上传的解决全流程
    目录vue上传文件formData上传解决axios实例的配置关键配置整体流程解决跨域上传文件跨域上传FormData格式等问题vue 批量上传文件简单说明一个实现思路vue上传文件...
    99+
    2024-04-02
  • element-ui el-upload实现上传文件及简单的上传文件格式验证功能
    在后台管理系统中总是会用到上传文件的功能, 想实现的样式如下:(实现上传文件后,在input输入框显示文件名 ) 结构代码如下: <el-form-item label="...
    99+
    2022-11-16
    文件上传elementUI中upload el-upload上传图片 element ui 上传
  • nodejs 实现简单的文件上传功能(示例详解)
    首先需要大家看一下目录结构,然后开始一点开始我们的小demo。 文件上传总计分为三种方式: 1.通过flash,activeX等第三方插件实现文件上传功能。 2.通过html的fo...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作