FormData对象上传文件

苏承栈

2026-09-17 • 👁 0人浏览过

formdata

对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用

xmlhttprequest

发送这个"表单"。在 Mozilla Developer 网站使用FormData对象有详尽的

FormData

对象使用说明。但上传文件部分只有底层的

XMLHttpRequest

对象发送上传请求，那么怎么通过

jQuery

的

Ajax

上传呢？本文将介绍通过

jQuery

使用

FormData

对象上传文件。使用

表单初始化

FormData

对象方式上传文件 HTML代码

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

对象，不需要对数据做处理。

标签添加

enctype="multipart/form-data"

属性。

cache

设置为

false

，上传文件不需要缓存。

contentType

设置为

false

。因为是由

表单构造的

FormData

对象，且已经声明了属性

enctype="multipart/form-data"

，所以这里设置为false。上传后，服务器端代码需要使用从查询参数名为

file

获取文件输入流对象，因为

中声明的是

name="file"

。基于jQuery的AJAX和JSON的实例中文WORD版本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看下载如果不是用

表单构造

FormData

对象又该怎么做呢？使用

FormData

对象添加字段方式上传文件 HTML代码

这里没有

标签，也没有

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]

中可以看到一个

标签能够上传多个文件，只需要在

里添加

multiple

或

multiple="multiple"

属性。服务器端读文件从

Servlet 3.0

开始，可以通过

request.getPart()

或

request.getPars()

两个对象 0获取上传的文件。这里不多说，详细请参考官网教程 Uploading Files with Java Servlet Technology 以及示例 The fileupload Example Application

相关文章