文件上传之 ajax 请求-阿里云开发者社区

文件上传之 ajax 请求

2018-10-08 1053

简介： 步骤简单思路清晰

+关注继续查看

创建页面导入 jquery
定义 input type=file
编写 ajax 请求
定义后台 servlet 接收文件

创建页面导入 jquery , 定义 input type=file , 编写 ajax 请求

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>this is ajax upload</title>
</head>
<body>

    <input type="file" id="file" name="file" />
    <br />
    <button id="submitFile">ajax upload</button>
    
    <script src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        
        $("#submitFile").click(function() {
            
            var formData = new FormData();
            formData.append("file", document.getElementById("file").files[0]);   
            formData.append("param", "paramValue");   
            $.ajax({
                url: "fileUpload",
                type: "POST",
                data: formData,
                /*contentType
                类型：String
                默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
                */
                contentType: false,
                /*processData
                类型：Boolean
                默认值: true。默认情况下，通过data选项传递进来的数据，
                    如果是一个对象(技术上讲只要不是字符串)，
                    都会处理转化成一个查询字符串，
                    以配合默认内容类型 "application/x-www-form-urlencoded"。
                    如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。
                */
                processData: false,
                success: function (data) {
                    if (data == "success") {
                        alert("上传成功");
                    }
                },
                error: function () {
                    alert("上传失败");
                }
            });
            
        });
        
    </script>

</body>
</html>

与平常编写的 ajax 的区别在于

使用 new FormData(); 来进行传值
多了一些属性
1. contentType: false
2. processData: false

document.getElementById("file").files[0]

document.getElementById("file") : 是一个 JavaScript 对象
在传递值是需要拿到上传文件的字节数据 .files[0]
document.getElementById("file").files[0] 执行完会是一个 file 对象可以 .size可获得文件的大小

定义后台 servlet 接收文件

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

        Part part = request.getPart("file");

        InputStream inputStream = part.getInputStream();
        byte[] bytes = new byte[1024];
        inputStream.read(bytes);
        System.out.println(new String(bytes));
        System.out.println("param:" + request.getParameter("param"));

        response.getWriter().write("success");

}

文件上传 之 ajax 请求

文件上传之 ajax 请求