一个按钮实现文件的异步上传

最新推荐文章于 2024-08-05 23:02:44 发布

Ritajiaojiao

最新推荐文章于 2024-08-05 23:02:44 发布

阅读量1.9k

点赞数

文章标签： JavaScript Jsp Servlet uploadFile

本文链接：https://blog.csdn.net/Ritajiaojiao/article/details/80630221

版权

要想实现文件的上传功能，最基础的就是在jsp中使用form提交的方式实现，但这种方式会在页面中呈现两个按钮，并且自带的按钮比较丑。
最近在做项目的过程中，实现了用一个按钮实现文件异步上传的功能。其中异步上传的JS和Servlet采用的是”zouminglan“的博客中的代码，见：https://www.cnblogs.com/zml-java/p/6255311.html。
这里需要用到插件ajaxfileupload.js，jar包：commons-fileupload-1.3.2.jar，commons-io-2.5.jar。
其中，jsp代码如下：

<%--
  Created by IntelliJ IDEA.
  User: yjk
  Date: 2018/6/8
  Time: 21:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>一个按钮实现文件异步上传</title>
    <link type="text/css" href="css/importFile.css" rel="stylesheet">
</head>
<body>
<div id="import">
    <div><img src="images/import_30x30_white.png"></div>
    <%--input须在import之前--%>
    <input type="file" id="file" name="file" title="import" onchange="importFile()" />
    <div onclick="return selectFile()">import</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/ajaxfileupload.js"></script>
<script type="text/javascript" src="js/importFile.js"></script>
</html>

js代码：

function selectFile() {
    $("#file").trigger("click");      //让import按钮的事件触发
}

function importFile() {
    var name = $('#file').val();　　　//获得文件名称,$('#file').val()含有路径 -- C:\fakepath\shudian1.pnml
    name=name.split("fakepath\\")[1];
    //判断是什么类型的文件，类型正确才上传，防止用户错误提交不正确的文件,防止浪费内存空间.
    if (name.includes(".xml") || name.includes(".pnml")) {
        $.ajaxFileUpload
        (
            {
                url:'/importFile',//用于文件上传的服务器端请求地址
                secureuri:false,//一般设置为false
                fileElementId:'file',//文件上传标签的id属性
                dataType: 'text',//返回值类型 一般设置为json
                success: function (data) //服务器成功响应处理函数
                {
                    alert("上传成功");
                },
                error: function (data)//服务器响应失败处理函数
                {
                    alert("上传失败");
                }
            }
        );
    }
    else{
        alert("文件格式必须是xml或pnml！");
    }
    return false;
}

servlet代码：

package servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

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 org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


@WebServlet(name = "importFile")
public class importFile extends HttpServlet {
    private static final long serialVersionUID = 1L;

    // 上传文件存储目录
    private static final String UPLOAD_DIRECTORY = "importFile";

    // 上传配置
    private static final int MEMORY_THRESHOLD   = 1024 * 1024 * 3;  // 3MB
    private static final int MAX_FILE_SIZE      = 1024 * 1024 * 40; // 40MB
    private static final int MAX_REQUEST_SIZE   = 1024 * 1024 * 50; // 50MB

    public importFile(){
        super();
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        PrintWriter writer = response.getWriter();
        // 检测是否为多媒体上传
        if (!ServletFileUpload.isMultipartContent(request)) {
            // 如果不是则停止

            writer.println("Error: 表单必须包含 enctype=multipart/form-data...");
            writer.flush();
            return;
        }

        //记住要写这句话，上传的文件名才不会乱码！！！！！！！！！
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");

        // 配置上传参数
        DiskFileItemFactory factory = new DiskFileItemFactory();
        // 设置内存临界值 - 超过后将产生临时文件并存储于临时目录中
        factory.setSizeThreshold(MEMORY_THRESHOLD);
        // 设置临时存储目录
        factory.setRepository(new File(System.getProperty("java.io.tmpdir")));

        ServletFileUpload upload = new ServletFileUpload(factory);

        // 设置最大文件上传值
        upload.setFileSizeMax(MAX_FILE_SIZE);

        // 设置最大请求值 (包含文件和表单数据)
        upload.setSizeMax(MAX_REQUEST_SIZE);

        // 构造临时路径来存储上传的文件
        // 这个路径相对当前应用的目录
        String uploadPath = request.getContextPath() + File.separator + UPLOAD_DIRECTORY;

        //获取项目发布路径下的upload文件夹
        uploadPath = request.getSession().getServletContext().getRealPath("/importFile");



        // 如果目录不存在则创建
        File uploadDir = new File(uploadPath);
        if (!uploadDir.exists()) {
            uploadDir.mkdir();
        }

        try {
            // 解析请求的内容提取文件数据
//                    @SuppressWarnings("unchecked")
            List<FileItem> formItems = upload.parseRequest(request);

            if (formItems != null && formItems.size() > 0) {
                // 迭代表单数据
                for (FileItem item : formItems) {
                    // 处理不在表单中的字段
                    if (!item.isFormField()) {
                        //这里处理文件中文乱码没用。。。。。。。。。
                        System.out.println(new String(item.getName().getBytes("utf-8"),"iso-8859-1"));
                        String fileName = new File(item.getName()).getName();
                        String filePath = uploadPath + File.separator + fileName;
                        File storeFile = new File(filePath);
                        // 在控制台输出文件的上传路径
                        System.out.println(filePath);
                        // 保存文件到硬盘
                        item.write(storeFile);
                        //注意编码，不然返回前端会乱码！！！
                        writer.println(new String("上传成功！".getBytes("utf-8"),"iso-8859-1"));
                    }
                }
            }

        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

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

css代码：

#import{
    width: 100px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    background-color: #555555;
    margin-right: 15px;
    margin-top: 5px;
    padding: 5px;
    color: white;
}
#import：hover{
    cursor: pointer;
    background-color: darkgreen;
}
#import div:nth-of-type(1){
    width: 30px;
    height: 30px;
    float: left;
}

#import div:nth-of-type(2){
    height: 30px;
    line-height: 30px;
    float: left;
    margin-left: 10px;
}
#import input{
    position:absolute;
    display: inline-block;
    width:110px ;
    height: 40px;
    cursor: pointer;
    left:0;
    top:0;
    opacity:0;
}

当然最后还要配置web.xml：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>importFile</display-name>
  <servlet>
    <servlet-name>importFile</servlet-name>
    <servlet-class>servlet.importFile</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>importFile</servlet-name>
    <url-pattern>/importFile</url-pattern>
  </servlet-mapping>

  <welcome-file-list>
    <welcome-file>importFile.jsp</welcome-file>
  </welcome-file-list>
</web-app>