很久没有写前端代码,尤其是上传,从业这么久居然从来没有使用过接口上传文件。经过查询文档,写法如下:
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
文章的更新编辑依此链接为准。欢迎关注源站原创文章!