jq实现前端文件上传
程序员文章站
2022-07-05 17:07:24
FormData FormData是XMLHttpRequest Level 2 新增的一个接口。 使用FormData可以实现各种文件上传。 使用 注意 使用jq的$.ajax()方法来进行文件上传时，需要设置contentType和processData两个参数。 当发送信息至服务器时，内容编码 ......
formdata
formdata是xmlhttprequest level 2 新增的一个接口。
使用formdata可以实现各种文件上传。
使用
// 创建formdata的实例 var formdata = new formdata(); // 用append()为实例添加键和值 formdata.append(键名, 键值);
注意
使用jq的$.ajax()方法来进行文件上传时，需要设置contenttype和processdata两个参数。
| 参数 | 类型 | 说明 |
| contenttype | string |
当发送信息至服务器时，内容编码类型默认为“application/x-www-form-urlencoded”。 该默认值适合大多数应用场合。 |
| processdata | boolean |
默认为true。 默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型“application/x-www-form-urlencoded”。 如果要发送dom树信息或者其他不希望转换的信息，请设置为false。 |
从上面两个参数的说明可以看出，ajax发送数据的时候内容编码类型是“application/x-www-form-urlencoded”，
而我们上传的文件可能是其他类型，所以上传的时候不设置内容类型，故 contenttype: false，
不对数据做处理，故 processdata: false 。
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jq实现前端文件上传</title>
</head>
<body>
<input id="file" type="file">
<button id="btn">上传</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#btn').click(function() {
var formdata = new formdata();
formdata.append("file", $('#file')[0].files[0]);
$.ajax({
type: "post",
url: "你要将文件上传到的地址",
data: formdata,
contenttype: false, // 不设置内容类型
processdata: false, // 不处理数据
datatype: "json",
success: function(data) {
// 请求成功后要执行的代码
},
error: function(data) {
// 请求失败后要执行的代码
}
});
});
</script>
</body>
</html>
观察
console.log($('#file')[0]);
console.log($('#file')[0].files[0]);
从上面的打印结果可以看到我们传的文件类型是“application/octet-stream”。
请求时的参数：
请求后的结果：
上一篇： 华为3款新品开售信息汇总：688元起售
下一篇： 前端技术之_CSS详解第五天