文档章节

通过jQuery Ajax使用FormData对象上传文件

郏高阳
 郏高阳
发布于 2016/09/07 15:00
字数 579
阅读 673
收藏 1

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单"。 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明。 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件。

使用<form>表单初始化FormData对象方式上传文件

HTML代码

<form id="uploadForm" enctype="multipart/form-data">
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

javascript代码

$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: new FormData($('#uploadForm')[0]),
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

这里要注意几点:

  • processData设置为false。因为data值是FormData对象,不需要对数据做处理。
  • <form>标签添加enctype="multipart/form-data"属性。

  • cache设置为false,上传文件不需要缓存。
  • contentType设置为false。因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data",所以这里设置为false。

上传后,服务器端代码需要使用从查询参数名为file获取文件输入流对象,因为<input>中声明的是name="file"。 如果不是用<form>表单构造FormData对象又该怎么做呢?

使用FormData对象添加字段方式上传文件

HTML代码

<div id="uploadForm">
    <input id="file" type="file"/>
    <button id="upload" type="button">upload</button>
</div>

这里没有<form>标签,也没有enctype="multipart/form-data"属性。 javascript代码

var formData = new FormData();
formData.append('file', $('#file')[0].files[0]);
$.ajax({
    url: '/upload',
    type: 'POST',
    cache: false,
    data: formData,
    processData: false,
    contentType: false
}).done(function(res) {
}).fail(function(res) {});

这里有几处不一样:

  • append()的第二个参数应是文件对象,即$('#file')[0].files[0]。
  • contentType也要设置为‘false’。 从代码$('#file')[0].files[0]中可以看到一个<input type="file">标签能够上传多个文件, 只需要在<input type="file">里添加multiple或multiple="multiple"属性。

前端截图

后台接收文件:

    <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <property name="defaultEncoding" value="utf-8"/>
    </bean>
@RequestMapping(value = "/import_tg_resource")
    public ModelAndView import_tg_resource(@RequestParam(value = "file", required = false) MultipartFile[] files, HttpServletRequest request, ModelMap model) {
        System.out.println("开始批量上传:文件数量:" + files.length);
        for (MultipartFile file : files ) {
            String path = request.getSession().getServletContext().getRealPath("upload");
            String fileName = file.getOriginalFilename();
            String prefix = fileName.substring(fileName.lastIndexOf("."));
            fileName = new Date().getTime() + prefix;
//            System.out.println("保存路径 " + path);
            File targetFile = new File(path, fileName);
            if(!targetFile.exists()){
                targetFile.mkdirs();
            }
             file.transferTo(targetFile);
        }
    }

© 著作权归作者所有

郏高阳

郏高阳

粉丝 101
博文 153
码字总数 112268
作品 1
黄浦
程序员
私信 提问
Web 前沿——HTML5 Form Data 对象的使用

您可能感兴趣的相关文章 10大流行 Metro UI Bootstrap 主题和模板 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的 Metro UI 风格 Bootstrap 主题 8款效果精美的 jQuery 加载动画和进度...

miscellanea
2014/09/22
465
0
FormData以及原生Ajax上传图片

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_35085676/article/details/80752254 Ajax对于表单提交来说,是一个很好的工具,他提供了异步提交的效果...

岚漾忆雨
2018/06/20
0
0
javascript将base64编码的图片数据转换为file并提交

直接提交base64编码图片数据,过大的话后台会出现转发错误问题。 一个不错的解决方式就是将base64编码的图片数据转换为Blob(与File相似)并添加到form中提交。下面是代码: / @param base6...

得意小生
2015/08/02
198
0
有关火狐浏览器文件重复上传多次问题

使用技术为:ssm+jsp+layerui。 问题描述:最近做了一个文件上传(ajax),其他浏览器都可以正常使用,但是使用火狐浏览器有时候上传一个文件,过11-12分钟会重复上传这个文件,有时候重复上...

遇见725
01/16
127
0
Python自动化开发学习24-Django中(AJAX)

讲师的博客地址:http://www.cnblogs.com/wupeiqi/articles/5703697.html 。号称是AJAX全套 原生Ajax Ajax主要就是使用 XmlHttpRequest 对象来完成请求的操作,该对象在主流浏览器中均存在(...

骑士救兵
2018/05/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

密码加密与微服务鉴权JWT详细使用教程

[TOC] 1.1、了解微服务状态 微服务集群中的每个服务,对外提供的都是Rest风格的接口,而Rest风格的一个最重要的规范就是:服务的无状态性。 什么是无状态? 1.服务端不保存任何客户端请求者信...

庭前云落
11分钟前
5
0
Xamarin.FormsShell基础教程(9)Shell相关类体系

Xamarin.FormsShell基础教程(9)Shell相关类体系 在Shell中,最为主要的类是Shell类。Shell类实现了大多数应用程序所需的基本UI功能的页面。除此以外,常用的类还有ShellContent、Tab、Fly...

大学霸
13分钟前
2
0
聊聊MVC、MVP、MVVM吧

先来介绍下本文结构: 三种框架的具体概念 在安卓开发上的写法、优缺点 1.概念 1.1 MVC MVC模式(Model–view–controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模...

二营长的意大利炮手
30分钟前
2
0
如果解释Python,什么是.pyc文件?

我已经了解Python是一种解释型语言......但是,当我查看我的Python源代码时,我看到.pyc文件,Windows将其识别为“编译的Python文件”。 这些来自哪里? #1楼 Python代码经历了两个阶段。 第...

javail
35分钟前
2
0
.NET Core初览

初览的应用场景为游戏服务器开发。所以测试在侧重点上更强于IO和密集型计算 TODO

梦想游戏人
38分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部