Ajax+Servlet超详细实现文件上传

最新推荐文章于 2023-03-10 11:36:13 发布

社会搬运工

最新推荐文章于 2023-03-10 11:36:13 发布

阅读量917

点赞数 1

分类专栏：文件上传文章标签： ajax java html

本文链接：https://blog.csdn.net/w13346019869/article/details/120538948

版权

文件上传专栏收录该内容

1 篇文章 0 订阅

订阅专栏

废话不多说，代码都有注释

maven:

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <!--文件上传-->
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>

一：前台代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="Jquery/jquery-1.7.2.js" type="text/javascript"></script>
    <script>
        window.fileurl="";
        $(()=>{
            // 设置头像的选择
            $("#photo").click(()=>{
                $("[name=photo]").click();
            });

            // 提交
            $("#submit").click(()=>{
                // let formData = new FormData($('#form1')[0]);
                let formData = new FormData(document.getElementById("form1"));
                //将文件数据保存到表单中 
                //formData.append("photo", $("[name=photo]")[0].files[0]);

                $.ajax({
                    url:"file",
                    type:"POST",
                    data:formData,
                    //普通的ajax提交，提交的内容是字符串！哪怕提交的是字节，也会被ajax序列化为一串字符串
                    //如果关闭【内容处理】，【处理数据】那么就可以提交字节数据
                    contentType:false,
                    processData:false,
                    success(response){
                        alert("上传成功！");
                    }
                })
            });

            // 文件改变事件
            $("[name=photo]").change(function(){
                //获取到file文件内容的路径 第一张文件
                window.fileurl=window.URL.createObjectURL(this.files[0]);
                $("#photo").attr("src",window.fileurl);
            });
        })
    </script>
</head>
<body>
<form id="form1">
    姓名：<input name="username"><br/>
    <input type="file" name="photo" style="display: none">
    选择头像：<img id="photo" src="photo/upload.jpg" width="100px" height="100px"><br/>
    <button type="button" id="submit">提交</button>
</form>

</body>
</html>

二：Servlet页面

@WebServlet(name = "MultipartServlet",urlPatterns = "/upload")
public class MultipartServlet extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        Map<String,String> parameters =new HashMap<>();

        // 1 获取到工厂
        DiskFileItemFactory factory=new DiskFileItemFactory();
        factory.setSizeThreshold(1024*1024*10);//10mb               //  设置缓冲区大小
        factory.setRepository(new File("upload"));    // 设置缓冲区路径

        // 2 获得文件上传对象
        ServletFileUpload upload=new ServletFileUpload(factory);
        upload.setSizeMax(1024*1024*5);                             // 设置单个文件最大上传大小

        // 3 获得表单所有提交的数据
        try {
            List<FileItem> list =upload.parseRequest(request);
            for(FileItem fileItem:list){
                // 判断当前表单控件是普通控件，还是上传文件的控件
                if(fileItem.isFormField()){
                    // 获取名称
                    String fileItemName = fileItem.getFieldName();
                    System.out.println(fileItemName);
                    //获取普通控件得val值
                    String value = fileItem.getString("utf-8");

                    //将普通技术添加到map
                    parameters.put(fileItemName,value);

                }else{
                    // 获得上传图片得源路径名称
                    String name = fileItem.getName();
                    // 通过方法生成新得文件名称
                    String newFileName = generatorName(name);
                    //获得上传文件保存的目录
                    String realPath = request.getSession().getServletContext().getRealPath("photo");
                    //将缓冲区的文件移动到photo
                    fileItem.write(new File(realPath,newFileName));
                }
            }


        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        response.setContentType("text/html;charset=utf-8");
        PrintWriter writer = response.getWriter();
        writer.write("1");
        writer.close();
    }

    //生成新的文件名
    private String generatorName(String name) {
        //截取图片扩展名称
        String extenName = name.substring(name.lastIndexOf("."));
        // 使用UUID+扩展名形成新的文件名
        return UUID.randomUUID()+extenName;
    }

    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        doPost(request,response);
    }
}

社会搬运工

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax+Servlet超详细实现文件上传

废话不多说，代码都有注释maven: <dependency> <groupId>javax.servlet</groupId> <artifactId>servlet-api</artifactId> <version>2.5</version> </dependency> <!--文
复制链接

扫一扫