js文件上传以及表单提交

最新推荐文章于 2024-05-06 11:40:47 发布

ITzhongzi

最新推荐文章于 2024-05-06 11:40:47 发布

阅读量3.6k

点赞数 1

分类专栏：前端学习笔记文章标签： FormData 上传

本文链接：https://blog.csdn.net/ITzhongzi/article/details/79882233

版权

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

原理：

使用 FormData对象，将要发送给后台的数据都 append该对象中，包括文件，最后将这个对象发送给后台。


<!doctype html>
<html lang="zh">

<head>
<meta charset="utf-8">
<title>HTML5 Ajax Uploader</title>
<script src="jquery.js"></script>
</head>

<body>
<p>
<input type="file" id="upfile">
</p>
<p>
<input type="button" id="upJS" value="用原生JS上传">
</p>
<p>
<input type="button" id="upJQuery" value="用jQuery上传">
</p>
<script>
/*原生JS版*/
document.getElementById("upJS").onclick = function () {
/* FormData 是表单数据类 */
var fd = new FormData(); //创建一个表单对象
var ajax = new XMLHttpRequest();
fd.append("upload", 1); //将数据append 到表单对象中
/* 把文件添加到表单里 */
fd.append("upfile", document.getElementById("upfile").files[0]);

ajax.open("post", "/messagefile", true); //提交方式 接口地址 同步异步？
ajax.setRequestHeader("token","11111"); // 设置 请求头
ajax.onload = function () {
console.log("准备完毕");
console.log(ajax.responseText);
console.log(fd);
};

ajax.send(fd); //发送 ajax请求 上传文件

ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}

}

/* jQuery 版 */
$('#upJQuery').on('click', function () {
var fd = new FormData();
fd.append("upload", 4);
fd.append("upfile", $("#upfile").get(0).files[0]);
fd.append("Headers",000);

$.ajax({
url: "/messagefile",
type: "POST",
processData: false,
contentType: false,
headers:{
token:"555"
},
data: fd,
success: function (d) {
console.log(d);
}
});
});
</script>
</body>

</html>

ITzhongzi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
js文件上传以及表单提交

原理：使用 FormData对象，将要发送给后台的数据都 append该对象中，包括文件，最后将这个对象发送给后台。<!doctype html><html lang="zh"><head><meta charset="utf-8"><title>HTML5 Ajax Uploader</title&...
复制链接

扫一扫