jquery上传文件报错:Failed to construct ‘FormData‘

[软件开发] 季雨林 2020/12/21 0:28:09

很久没有写前端代码,尤其是上传,从业这么久居然从来没有使用过接口上传文件。经过查询文档,写法如下:

HTML代码部分:

<form id="upImgForm" method="post" enctype="multipart/form-data">
    <input type="file" name="upImg" id="upImg" multiple="multiple" style="display: none;" />
    <input id="btnSendImg" class="btn btn-primary" type="button" value="发送图片" />
</form>

jQuery的AJAX上传代码部分:

//console.log("js",document.getElementById("upImgForm"));
//console.log("jquery", $("#upImgForm").eq(0)[0] );//问题所在:$("#upImgForm")并不等于document.getElementById("upImgForm")
$.ajax({
    cache: false,
    contentType: false,
    type: "POST",
    dataType: "text",
    url: "API/Chat/UploadFile.ashx",
    data: new FormData(document.getElementById("upImgForm")), 
    processData: false,//不希望自动转换
    async: false,//请求设为异步
    error: function (data) {//发送请求失败执行的函数
        alert("发送请求失败!");
    },
    success: function (data) {//发送请求成功执行的函数
        alert("Success!");
    }
})


原本使用 data: new FormData($("#upImgForm")) ,运行后报错。

换成 data: new FormData(document.getElementById("upImgForm"))  解决问题。


经过了解,发现jquery获取的对象,跟原生js获取的对象并不相同。jquery获取的是一个数组,数组里第一个元素才是原生js获取到的FormData内容。


问题所在:$("#upImgForm")并不等于document.getElementById("upImgForm"),而$("#upImgForm").eq(0)[0]才跟document.getElementById("upImgForm")对应能获取到FormData数据。



原文地址: https://www.opengps.cn/Blog/View.aspx?id=836 文章的更新编辑依此链接为准。欢迎关注源站原创文章!

评论

暂无评论!

发表评论:

用于接收作者回复信息
点击更换验证码 - openGPS提示