使用ajax上传文件

最新推荐文章于 2022-01-11 20:06:17 发布

原创最新推荐文章于 2022-01-11 20:06:17 发布 · 358 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨了使用FormData上传文件时常见的问题，特别是如何正确地将文件数据附加到form表单中，确保服务器能够成功接收。文章提供了具体的代码示例，包括jQuery的使用，以及如何通过调整formData.append的参数来解决问题。

文件上传时注意获取的参数是否存在，可以使用console.log(fomedata.get(ket))看看你保存的参数是否存入模拟的form表单内
如果存入数据是，服务器接收不到数据（服务端获取数据为空），可能是fomedata.append（key，name）保存的数据存在问题。
将获取变更，我再此浪费了好久的时间，希望对你们有所帮助，

遇到的问题：使用方式 “fomedata.append（“file”，$(".el-upload__input")[0].files）”；在后端一直获取不到数据，网上找了好久也没找到，这时我们需要知道$(".el-upload__input")[0].files获取的是什么东西，它获取的是一个对象形式的数据，可是在上传时我们不需要这样的数据。

问题解决，模拟from表单使储方式“fomedata.append（“file”，$(".el-upload__input")[0].files[0]) ”，获取到详细信息进行存储这样就获取到数据了；

页面代码

<input type="file" name="img" multiple="multiple" onchange="uploadppt()" class="el-upload__input">

jquery代码

        var formData = new FormData();// 创建一个form类型的数据
        formData.append("img",$(".el-upload__input")[0].files[0]);
        $.ajax({
            url: "/course/lessonManage/uploaddata",
            type: "POST",
            processData: false, // 将数据转换成对象，不对数据做处理，故 processData: false
            contentType: false,    // 不设置数据类型
            xhrFields: {                // 这样在请求的时候会自动将浏览器中的cookie发送给后台
                withCredentials: true
            },
            data: formData,
            success: function (data) {
                console.log(data);
            },
        })