如何实现文件的上传功能?

如何用servlet如何实现文件上传:

  • 一、用servlet如何实现文件上传:
    • 1.需要先获取你把上传的文件放到哪里(也就是你的存储路径)
    • 2.如果你需要上传的不只是一个文件的话,需要先定一个Part集合来得到你要上传的集合,通过用户的请求
    • 3.先通过request去拿到你要上传的文件用Part对象接受
    • 4.然后就是通过part获取请求头part.getHeader(“content-disposition”);(请求头有文件的信息)
    • 5.定义一个得到文件名的方法(这里如果需要可以把得到的文件名进行分开重新拼接)
      • a.通过一个随机的自定义函数新建一个文件名
      • b.得到上传文件的扩展名
      • c.然后拼接成一个完整的 路径+文件名+扩展名
    • 6.通过part对象去调用封装好的write方法写到你的指定路径中去



package test;

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.io.PrintWriter;
import java.util.Collection;

@WebServlet(name = "UploadServlet",urlPatterns = "/UploadServlet")
@MultipartConfig
public class UploadServlet extends HttpServlet {


    @Override
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //存储路径
        String savePath = request.getServletContext().getRealPath("/WEB-INF/uploadFile");
        //获取上传的文件集合
        Collection<Part> parts = request.getParts();
        //上传单个文件
        if (parts.size()==1) {
            //Servlet3.0将multipart/form-data的POST请求封装成Part,通过Part对上传的文件进行操作。
            //Part part = parts[0];//从上传的文件集合中获取Part对象
            Part part = request.getPart("test");//通过表单file控件(<input type="file" name="file">)的名字直接获取Part对象
            //Servlet3没有提供直接获取文件名的方法,需要从请求头中解析出来
            //获取请求头,请求头的格式:form-data; name="file"; filename="snmp4j--api.zip"
            String header = part.getHeader("content-disposition");
            //获取文件名
            String fileName = getFileName(header);
            //把文件写到指定路径
            part.write(savePath+File.separator+fileName);
        }else {
            //一次性上传多个文件
            for (Part part : parts) {//循环处理上传的文件
                //获取请求头,请求头的格式:form-data; name="file"; filename="snmp4j--api.zip"
                String header = part.getHeader("content-disposition");
                //获取文件名
                String fileName = getFileName(header);
                //把文件写到指定路径
                part.write(savePath+File.separator+fileName);
            }
        }
        PrintWriter out = response.getWriter();
        out.println("上传成功");
        out.flush();
        out.close();
    }

    /**
     * 根据请求头解析出文件名
     * 请求头的格式:火狐和google浏览器下:form-data; name="file"; filename="snmp4j--api.zip"
     *                 IE浏览器下:form-data; name="file"; filename="E:\snmp4j--api.zip"
     * @param header 请求头
     * @return 文件名
     */
    public String getFileName(String header) {
        /**
         * String[] tempArr1 = header.split(";");代码执行完之后,在不同的浏览器下,tempArr1数组里面的内容稍有区别
         * 火狐或者google浏览器下:tempArr1={form-data,name="file",filename="snmp4j--api.zip"}
         * IE浏览器下:tempArr1={form-data,name="file",filename="E:\snmp4j--api.zip"}
         */
        String[] tempArr1 = header.split(";");
        /**
         *火狐或者google浏览器下:tempArr2={filename,"snmp4j--api.zip"}
         *IE浏览器下:tempArr2={filename,"E:\snmp4j--api.zip"}
         */
        String[] tempArr2 = tempArr1[2].split("=");
        //获取文件名,兼容各种浏览器的写法
        String fileName = tempArr2[1].substring(tempArr2[1].lastIndexOf("\\")+1).replaceAll("\"", "");
        return fileName;
    }

    @Override
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doGet(request, response);
    }
}

前端的jsp代码

<%--
  Created by IntelliJ IDEA.
  User: user
  Date: 2018-04-25
  Time: 9:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>这个是测试文件上传</title>
  </head>
  <body>
  <fieldset>
    <legend>
      上传单个文件
    </legend>
    <!-- 文件上传时必须要设置表单的enctype="multipart/form-data"-->
    <form action="${pageContext.request.contextPath}/UploadServlet"
          method="post" enctype="multipart/form-data">
      上传文件:
      <input type="file" name="test">
      <br>
      <input type="submit" value="上传">
    </form>
  </fieldset>
  <hr />
  <fieldset>
    <legend>
      上传多个文件
    </legend>
    <!-- 文件上传时必须要设置表单的enctype="multipart/form-data"-->
    <form action="${pageContext.request.contextPath}/UploadServlet"
          method="post" enctype="multipart/form-data">
      上传文件:
      <input type="file" name="file1">
      <br>
      上传文件:
      <input type="file" name="file2">
      <br>
      <input type="submit" value="上传">
    </form>
  </fieldset>
  </body>

</html>

**注意:
需要注意的地方就是你需要手动在你的out目录下建一个存放目录的地址**
这里写图片描述

在React中实现文件上传功能可以通过以下步骤进行: 1. 创建一个React组件,用于处理文件上传的逻辑和UI展示。 2. 在组件的state中定义一个变量,用于存储上传文件。 3. 在组件的render方法中添加一个文件选择的input元素,并为其添加一个onChange事件处理函数。 4. 在onChange事件处理函数中,获取用户选择的文件,并将其存储到组件的state中。 5. 在组件的render方法中添加一个提交按钮,并为其添加一个onClick事件处理函数。 6. 在onClick事件处理函数中,使用FormData对象创建一个表单数据对象,并将上传文件添加到表单数据中。 7. 使用fetch或axios等工具,将表单数据发送到服务器端进行文件上传。 8. 在服务器端接收到文件后,进行相应的处理和存储。 下面是一个简单的示例代码: ```javascript import React, { useState } from 'react'; function FileUpload() { const [file, setFile] = useState(null); const handleFileChange = (event) => { setFile(event.target.files[0]); }; const handleUpload = () => { const formData = new FormData(); formData.append('file', file); // 使用fetch或axios发送formData到服务器端进行文件上传 fetch('/upload', { method: 'POST', body: formData, }) .then(response => response.json()) .then(data => { // 处理上传成功后的逻辑 }) .catch(error => { // 处理上传失败后的逻辑 }); }; return ( <div> <input type="file" onChange={handleFileChange} /> <button onClick={handleUpload}>上传</button> </div> ); } export default FileUpload; ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值