文件上传到页面展示

    科技2024-12-12  27

    文件上传到页面进行展示 效果图如下: 用文字真的不是很好形容,下面直接用代码进行展示把 servlet中的代码:

    package com.itheima; import org.apache.commons.fileupload.FileItem; import org.apache.commons.fileupload.disk.DiskFileItemFactory; import org.apache.commons.fileupload.servlet.ServletFileUpload; 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 java.io.File; import java.io.IOException; import java.util.List; @WebServlet("/fileServlet") public class fileServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); response.setContentType("text/html;charset=utf-8"); try { testUpload(request,response); } catch (Exception e) { e.printStackTrace(); } request.getRequestDispatcher("/fileDownLoad.jsp").forward(request,response); } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } private void testUpload(HttpServletRequest request, HttpServletResponse response) throws Exception { //1.确认该操作是否支持文件上传操作,enctype=“multipart/form-date if (ServletFileUpload.isMultipartContent(request)) { //2.创建磁盘工厂对象 DiskFileItemFactory factory = new DiskFileItemFactory(); //3.Servlet文件上传核心对象 ServletFileUpload fileUpload = new ServletFileUpload(factory); //4.从request中读取数据 List<FileItem> fileItems = fileUpload.parseRequest(request); for (FileItem item : fileItems) { //5.当前表单是否是文件表单 if (!item.isFormField()) { //6.从临时存储文件的地方将内容写入到指定位置 item.write(new File(this.getServletContext().getRealPath("upload"), item.getName())); //这一行代码主要是在这个页面中进行展示,一般情况下是将图片保存到指定的位置,需要的时候再进行展示 request.setAttribute("picture",item.getName()); } //这行代码也是不需要的,打印出来帮助理解jsp页面中的代码 System.out.println(item); } } } }

    jsp中的代码:

    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <div> <form id="editForm" action="${pageContext.request.contextPath}/fileServlet" method="post" enctype="multipart/form-data"> <div>题干图片</div> <div> <input type="file" placeholder="题干图片" name="picture"> </div> <div> <button type="button" onclick='document.getElementById("editForm").submit()'>保存</button> <button type="button" onclick="history.back(-1);">返回</button> </div> </form> </div> <c:if test="${picture.length() > 0}"> <div class="col-md-2 title">题干图片</div> <div class="col-md-10 data "> <img src="upload/${picture}"/> </div> </c:if> </body> </html>
    Processed: 0.012, SQL: 8