文件上传 之 ajax 请求

简介: 步骤简单思路清晰
  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");

}
目录
相关文章
|
6月前
|
JSON 前端开发 JavaScript
axios请求成功而$.ajax却不行排错
axios请求成功而$.ajax却不行排错
59 2
|
6月前
|
前端开发
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
解决前端ajax跨域请求不携带cookie信息JSESSIONID的问题
|
12天前
|
XML 前端开发 JavaScript
|
29天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
57 22
|
29天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
29天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
53 4
|
1月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
82 1
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
54 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
32 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。