文件上传 之 ajax 请求

  1. 云栖社区>
  2. 博客>
  3. 正文

文件上传 之 ajax 请求

心意乱 2018-10-08 09:36:12 浏览556
展开阅读全文
  1. 创建页面导入 jquery
  2. 定义 input type=file
  3. 编写 ajax 请求
  4. 定义后台 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 的区别在于

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

    1. contentType: false
    2. processData: false

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

  1. document.getElementById("file") : 是一个 JavaScript 对象
  2. 在传递值是需要拿到上传文件的 字节数据 .files[0]
  3. 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");

}

网友评论

登录后评论
0/500
评论
心意乱
+ 关注