使用FormData对象上传文件

最新推荐文章于 2025-06-18 20:45:00 发布

论闲

最新推荐文章于 2025-06-18 20:45:00 发布

阅读量800

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

原文链接：https://www.cnblogs.com/qiumingcheng/p/6854933.html

前端专栏收录该内容

5 篇文章

订阅专栏

该博客介绍了如何利用HTML、JavaScript和jQuery实现文件上传功能。通过创建FormData对象，将文件添加到表单数据中，并使用AJAX进行POST请求，实现了无刷新的文件上传。示例代码展示了文件输入元素和上传按钮的HTML结构，以及对应的JavaScript处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

html

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

$('#upload').click(function() {
	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) {});
})