通过ajax上传文件

Posted 小白进修

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了通过ajax上传文件相关的知识,希望对你有一定的参考价值。

html前端代码(表单内的标签必须有name属性才可以被后台获取)

必须要在form标签中设置属性   enctype="multipart/form-data"

需要借助 FormData 对象

      var formData = new FormData($("#form")[0]);

Ajax 代码

<script>
        function up() {
            var formData = new FormData($("#form")[0]);      //创建FormData对象
            if($("#file").val() == ""){           //判空
                alert("未选择文件");
                return ;
            }
            formData.append(\'img\', $(\'#file\')[0].files[0]) //把file添加进去  name命名为img      FormData.append(key,value);
            $.ajax({
                url: "/web02_war_exploded/img",      //发送的地址
                data: formData,            //发送的数据
                type: "post",              //发送的方式
                contentType: false,
                processData: false,        //序列化数据 默认为true(不序列化)
                success: function(data) {
                    alert("操作成功");
                },
                error: function() {
                    alert("操作失败");
                }
            })
        }
    </script>

后端代码

private Map<String, String> getParameters(HttpServletRequest request) {
        Map<String, String> params = new HashMap<>();
        try {
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload upload = new ServletFileUpload(factory);
            List<FileItem> items = upload.parseRequest(request);
            for (FileItem item : items) {
                if (item.isFormField()) {   //判断是否是普通的表单类型
                    params.put(item.getFieldName(), item.getString());
                }else{      //否则该表单是 File 型的
                    String fieldName = item.getFieldName(); //返回表单的name属性
                    String name = item.getName();   //返回文件的名称
                    File fil = new File("D:\\\\"+name);   //创建文件对象
                    item.write(fil);    //把上传的文件下载
                }
            }
        } catch (FileUploadException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return params;
    }

Ajax中文乱码问题:https://blog.csdn.net/qq_22771739/article/details/81564042

以上是关于通过ajax上传文件的主要内容,如果未能解决你的问题,请参考以下文章

如何通过 Jquery/AJAX 上传文件 [重复]

AJAX上传文件和文本不起作用

通过Ajax方式上传文件,使用FormData进行Ajax请求

如何通过拖放上传多个文件并使用ajax浏览

H5 通过Ajax方式上传文件,使用FormData进行Ajax请求

Ajax方式上传文件