servlet上传图片到服务器以及Ajax异步上传

最新推荐文章于 2022-11-07 16:42:48 发布

冷血～多好

最新推荐文章于 2022-11-07 16:42:48 发布

阅读量666

点赞数 2

分类专栏： JavaWeb 文章标签： ajax servlet

本文链接：https://blog.youkuaiyun.com/qq_44716544/article/details/115283877

版权

JavaWeb 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了如何使用Ajax实现图片的异步上传，并展示了Servlet代码，包括前端HTML表单、图片预览以及后端文件处理流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax异步上传图片</title>
 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- Ajax异步上传图片 -->

</head>
<body>
	<form action="UploadServlet" method="post"  enctype="multipart/form-data"> 
    <input type="file" name="file" id="file"> 
    <input type="submit" value="上传文件" > 
   </form>



</body>
</html>

用于读取上传后的图片


<%@ 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>Insert title here</title>
</head>
<body>

<img src="<%=request.getAttribute("picture") %>" >

<%=request.getAttribute("picture") %>
helloword
</body>
</html>

servlet代码

package service;

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Iterator;
import java.util.List;
import java.util.UUID;

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 org.apache.tomcat.util.http.fileupload.FileItem;
import org.apache.tomcat.util.http.fileupload.FileUploadException;
import org.apache.tomcat.util.http.fileupload.RequestContext;
import org.apache.tomcat.util.http.fileupload.disk.DiskFileItemFactory;
import org.apache.tomcat.util.http.fileupload.servlet.ServletFileUpload;


 

/**
 * Servlet implementation class UploadServlet
 */
@WebServlet("/UploadServlet")
@MultipartConfig  //使用MultipartConfig注解标注改servlet能够接受文件上传的请求
public class UploadServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
     
  
    /**
     * 上传数据及保存文件
     */
    
    protected void doPost(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {
    	response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();
    	
		
		Part part = request.getPart("file");
        String disposition = part.getHeader("Content-Disposition");
        if (part.getContentType().contains("image")) {//判断是否为图片		
        String suffix = disposition.substring(disposition.lastIndexOf("."),disposition.length()-1);
          //随机的生存一个32的字符串
        System.out.println(suffix);
        String filename = UUID.randomUUID()+suffix;
          //获取上传的文件名
        System.out.println(filename );
        InputStream is = part.getInputStream();
        //动态获取服务器的路径
        String serverpath = request.getServletContext().getRealPath("upload");
      
        System.out.println(serverpath);
        FileOutputStream fos = new FileOutputStream(serverpath+"/"+filename);
        byte[] bty = new byte[1024];
        int length =0;
        int i=0;
        while((length=is.read(bty))!=-1){
            fos.write(bty,0,length);
       
        }
        fos.close();
        is.close();
     
        String s=serverpath+"/"+filename;
        System.out.println(s);
        out.write(s);
   
       request.setAttribute("picture",s );
    	request.getRequestDispatcher("NewFile.jsp").forward(request, response);
    
        }
        else{
			  out.write("请选择图片文件！！！");
		}

    }
   

}

ajax异步上传图片到服务器（servlet代码不变）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax异步上传图片</title>
 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- Ajax异步上传图片 -->

</head>
<body>
	 <!-- <form action="UploadServlet" method="post"  enctype="multipart/form-data"> --> 
	<form method="post"  enctype="multipart/form-data"> 
    <input type="file" name="myfile" id="myfile"> 
  <!--    <input type="submit" value="上传文件" > -->
    
  <button onclick="add()">添加</button> 
    
   </form>


<script type="text/javascript">


    function add() {
    	
        var formData = new FormData();
        formData.append('file', $('#myfile')[0].files[0]);  //添加图片信息的参数

         $.ajax({
            url: "UploadServlet",
            type: "post",
            dataType: "json",
            cache: false,
            data: formData,
            processData: false,// 不处理数据
           contentType: false, // 不设置内容类型
           
        
             success: function () {
            	/* if(data == 'success'){
            		  alert("添加成功");
	        		
	        	} */
 
            	  alert("添加成功");
               
               
           },
         /*   beforeSend: function () {
               console.log("正在进行，请稍候");
               alert("正在进行，请稍候");
           },  */
           error: function (data) {
               console.log(data);
           } 
            
           
          
        	 
        })
      
    } 
  
	


</script>

</body>
</html>