上传文件（ajax结合form表单）

最新推荐文章于 2022-10-22 18:51:11 发布

原创最新推荐文章于 2022-10-22 18:51:11 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文件上传、下载同时被 2 个专栏收录

5 篇文章

订阅专栏

Ajax

3 篇文章

订阅专栏

本文介绍了两种常见的文件上传方法：直接使用HTML form提交和利用Ajax进行异步提交。这两种方法各有优势，前者简单直接，适用于对安全性要求不高的场景；后者通过异步操作提升用户体验，适合需要实时反馈的应用。

1、 form直接提交

<form method="post" action="url"  enctype="multipart/form-data" target="hideframe">             
    <input type="file" name="file" value="导入">
    <input type="submit" value="确定" >
</form>
<iframe name="hideframe" style="display:none;"></iframe>

2、ajax提交

<input type="file">

// 点击确认，提交
var formData = new FormData();

formData.append('file', $('input[type=file]')[0].files[0]);    // 'file'表示提交时的键名
var jqXHR = $.ajax({
    type: 'post',
    data: formData,
    dataType: 'json',
    url: 'url',
    processData: false,  // 告诉jQuery不要去处理发送的数据
    contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
});