jQuery+ajax 图片上传接口功能
·
很常用的功能，理论也很简单，用post的形式将二进制图片上传到接口，接口接收成功后返回字符串url图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/frame.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<script src="./js/jquery-3.7.0.js"></script>
<body>
<div class="blockForm">
<form id="form1">
<label for="image">
<img src="img/提交.png" class="blockImg"/>
</label>
<input id="image" name="image" type="file" style="display: none;" onchange="changeImg(this)" />
</form>
</div>
<script>
function changeImg(e) {
var formData = new FormData();
formData.append("file", $("#image")[0].files[0]);
$.ajax({
url: *接口地址*,
type: 'POST',
data: formData,
dataType: 'json',
cache: false,
processData: false, //不要处理发送的数据
contentType: false, //不要添加请求头
success: function(data) {
console.log(data);
$('.blockImg').attr("src", data.url) //上传图片预览
},
error: function(data) {
console.log(data);
}
});
}
</script>
</body>
</html>
如果是批量上传图片，只需对formData.append执行for循环即可。
效果展示：
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)