在前面的文章里面有写到,用vue上传图片的功能,vue-element-admin上传图片的功能:https://www.jianshu/p/383e1f2f4276,那如果是在jQuery里面,图片上传要怎么写?今天记录一个jQuery+ajax实现简单的上传图片功能。
思路很简单,和上面的差不多,前端以post的形式传递二进制图片文件给到后端,后端接收成功之后,同样返回一个字符串类型的url图片路径。
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf">
<head>
<title>jQuery+ajax实现简单的上传图片功能</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="form-group">
<label>图片</label>
<img src="" alt="" id="img" />
<input type="file" name="file" id="uploadImage" onchange="postData()">
</div>
</body>
<script type="text/javascript">
function postData() {
var formData = new FormData();
formData.append("file", $("#uploadImage")[0].files[0]);
$.ajax({
url: basePath + "/upload.action",
type: "post",
data: formData,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
dataType: 'text',
success: function(data) {
var params = JSON.parse(data)
$("#img").attr("src", params);
},
error: function(data) {
}
});
}
//赋值变量
var basePath = getContextPath();
// 获取项目路径
function getContextPath() {
var pathName = window.document.location.pathname;
var projectName = pathName.substring(0, pathName.substr(1).indexOf(
'/') + 1);
return projectName;
}
</script>
</html>
发送请求之后,可以在network里面看到具体的请求以及参数。
这里了可以看到Form data的文件格式,二进制binary文件
在看一眼返回值:
额,这里我们的后端比较省事,简单粗暴的,直接的,赤裸裸的给了个字符串,嗯,,也行吧。
效果是这个样子的(我这里没有给默认的图片,可以添加一下默认的图片~)
在点击选择文件按钮的时候,会打开本地的文件夹选择一张图片,点击打开的时候,会触发onchange绑定的函数,发起请求。接收到返回值之后,再讲返回值渲染到页面上。
注意:
如果接口存在问题的话,要用postman测试一下
postman测试上传图片接口步骤如下:
1:新建一个窗口
将接口地址和请求方式填写一下
2:选择Body,选择form-data,选择File
3:在KEY里面填写一下,file,不填写会出错,然后VALUE会出现选择本地图片的选项。
4:选择完本地图片之后,点击send发送
一般到这步就能看到返回值了
更多推荐
jQuery+ajax实现简单的上传图片功能
发布评论