Servlet ajax 文件上传和JDBC+Servler用户表增删改查

avatar 2020年12月31日12:06:01 0 138 views

昨天晚上帮一个妹子,应该是大二或者大三的。解决了Servlet+JDBC实现用户表的增删改查功能,当时妹子遇到的问题是文件上传和日期格式处理不太会。

我让她把代码发我,我本地调试,结果发现坑很多,就是很多细节问题。不过对于初学者而言,能把项目搭建起来,做一个大概就不错了。

项目代码和表都是妹子创建的,不太规范,请见谅,仅供初学者使用。

用户表的增删改查请查看github的代码,本文介绍一下文件上传功能吧

代码地址:https://github.com/saysky/Servlet_JDBC_20201230/

 

1.依赖准备

如果使用 jar 包方式的,引入以下2个jar

commons-fileupload-1.2.1.jar

commons-lang-2.4.jar

 

如果使用 maven,需要在 pom.xml 里添加

<dependency>
    <groupId>commons-fileupload</groupId>
    <artifactId>commons-fileupload</artifactId>
    <version>1.2.1</version>
</dependency>
<dependency>
    <groupId>commons-lang</groupId>
    <artifactId>commons-lang</artifactId>
    <version>2.4</version>
</dependency>

 

 

2. 后台代码

UploadServlet

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
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.io.PrintWriter;
import java.util.List;

/**
 * 文件上传
 */
@WebServlet("/UploadServlet")
public class UploadServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    
    private static final String UPLOAD_PATH = "/Users/liuyanzhao/Desktop/ArcSofthotel-prj1/WebContent/uploads";


    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("utf-8"); // 设置编码
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        // 获得磁盘文件条目工厂
        DiskFileItemFactory factory = new DiskFileItemFactory();

        // 设置 缓存的大小,当上传文件的容量超过该缓存时,直接放到 暂时存储室
        factory.setSizeThreshold(1024 * 1024);

        // 高水平的API文件上传处理
        ServletFileUpload upload = new ServletFileUpload(factory);

        try {
            String filename = "";
            List<FileItem> list = upload.parseRequest(request);
            // 获取上传的文件
            for (FileItem item : list) {
                // 获取文件名
                filename = System.currentTimeMillis() + ".png";
                File file = new File(UPLOAD_PATH, filename);
                file.createNewFile();
                // 真正写到磁盘上
                item.write(file);
            }

            PrintWriter writer = response.getWriter();

            writer.print(filename);

            writer.close();

        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }


}

 

注意修改 UPLOAD_PATH 为你的文件上传目录,可以选择 WebContent目录下新建uploads文件夹,然后复制路径

Windows 的如 D:\\xxx\\uploads

 

3. 前端代码

html代码

<tr>
    <td>人脸照片</td>
    <td>
        <input type="text" name="face" id="face">
        <input type="button" value="浏览文件"
               style="border-radius: 0; border-left: 0;"
               onclick="$('#file').click();">
        <input type="file" id="file" accept=".png, .jpg, .jpeg" style="display: none">
    </td>
</tr>

js 代码

// 添加图片上传
$('body').on('change', '#file', function () {
    var formData = new FormData();
    var files = $($(this))[0].files[0];
    formData.append("file", files);
    $.ajax({
        url: 'UploadServlet',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        dataType: 'text',
        success: function (res) {
            console.log(res);
            if (res != "") {
                alert('上传成功');
            }
            $('#face').val(res);
        }
        , error: function (res) {
            // alert('错误');
        }
    });
})

注意需要引入 jquery

效果图如下

完整代码:https://github.com/saysky/Servlet_JDBC_20201230/

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0