Ajax实现文件上传时通过FormData实现的
FormData
概述
FormData类型其实是在XMLHttpRequest 2级定义的，它是为序列化表以及创建与表单格式相同的数据（当然是用于XHR传输）提供便利。
构造函数
创建一个formData对象实例有几种方式
1、创建一个
空对象
实例
var formData = new FormData();此时可以调用append()方法来添加数据
这里简单的介绍一下FormData，有兴趣的朋友可以自己私下看看；
下面给大家介绍两种实现文件上传
1：没使用插件，单个文件的上传（注意：
ajax实现文件上传的话用到的是：绝对路径
）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input id="file" type="file" name="file"/>
</form>
<button id="upload">上传文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://192.168.1.101:8080/springbootdemo/file/upload", //上传文件的请求路径必须是绝对路劲
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上传失败");
});
});
});
</script>
</html>
2：Ajax实现多文件的上传 （
这个是多选上传，关键是
multiple="multiple
“这个属性，另外使用的接口也是多文件上传的接口
）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title></title>
</head>
<body>
<form id="uploadForm" enctype="multipart/form-data">
文件:<input type="file" name="file" multiple="multiple"/><br>
</form>
<button id="upload">上传文件</button>
</body>
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles",
data: formData,
cache: false,
processData: false,
contentType: false,
}).success(function (data) {
alert(data);
}).error(function () {
alert("上传失败");
});
});
});
</script>
</html>这边都是前端代码，后台代码也之间简单的文件上传用法一样。
版权声明：本文为fakergoing原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。