ajax传文件到服务器

探索家

于 2020-04-09 23:28:36 发布

阅读量318

点赞数

分类专栏：前端那些事文章标签： javascript ajax 文件上传

本文链接：https://blog.youkuaiyun.com/qq_39852560/article/details/105423219

版权

前端那些事专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的前端文件上传功能。通过FormData对象处理文件数据，并使用AJAX进行POST请求，实现文件的即时上传。代码示例展示了如何监听文件输入变化并发送文件。

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

1、前端代码

<form enctype="multipart/form-data" id="uploadImg">
    上传文件:  
	<input name="file" type="file" id="file">	     
</form>

2、JS代码如下

$('input[type="file"]').on('change', function(){
    var file = this.files[0];
    var formData = new FormData($('#uploadImg')[0]);
    // formData.append('file', file);
    console.log(formData.get('file'))
    $.ajax({
        url: 'url',
        type: 'POST',
        cache: false,
        data: formData,
        processData: false,
        contentType: false,
     }).done(function(res) {
        console.log(res)
     }).fail(function(res) {
        console.log(res)
     });
});

以上是在每次选择文件时都会上传一次