开发者社区> 心意乱> 正文

文件上传 之 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");

}

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Ajax-16:Axios发送Ajax请求
Ajax-16:Axios发送Ajax请求
42 0
vue axios请求频繁时取消上一次请求
一、前言 在项目中经常有一些场景会连续发送多个请求,而异步会导致最后得到的结果不是我们想要的,并且对性能也有非常大的影响。例如一个搜索框,每输入一个字符都要发送一次请求,但输入过快的时候其实前面的请求并没有必要真的发送出去,这时候就需要在发送新请求的时候直接取消上一次请求。
1591 0
如何在函数计算中使用 Node.js 处理 multipart 文件上传请求
web 开发中我们经常会允许用户通过 HTTP POST 请求上传文档到服务器,本文将介绍在函数计算中基于 node.js 使用 multipart form-data 来实现文件上传服务。
2781 0
Ajax-17:使用fetch函数发送ajax请求
Ajax-17:使用fetch函数发送ajax请求
274 0
前端文件上传-javascript-ajax
书写是为了更好的记忆。
25 0
ajax请求不能下载文件(转载)
最近在做文件下载,后台写了个控制层,直接走进去应该就可以下载文件,各种文件图片,excel等 但是起初老是下载失败,并且弹出下面的乱码: 前台请求代码:   [html] view plain copy   $('#fileexcel').
1450 0
+关注
20
文章
3
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载