jQuery+ajax实现简单的上传图片功能

Bertha 。 2022-11-22 05:11 186阅读 0赞

在前面的文章里面有写到，用vue上传图片的功能，vue-element-admin上传图片的功能：https://www.jianshu.com/p/383e1f2f4276，那如果是在jQuery里面，图片上传要怎么写？今天记录一个jQuery+ajax实现简单的上传图片功能。

思路很简单，和上面的差不多，前端以post的形式传递二进制图片文件给到后端，后端接收成功之后，同样返回一个字符串类型的url图片路径。

<!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    	<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.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    		<script src="https://cdn.bootcss.com/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文件  
![3537e458cc0382e6ea08b3207fe20c7e.png][]

在看一眼返回值：  
额，这里我们的后端比较省事，简单粗暴的，直接的，赤裸裸的给了个字符串，嗯，，也行吧。

![a2540ad46930d045960ef7813a8ee85f.png][]

效果是这个样子的（我这里没有给默认的图片，可以添加一下默认的图片~）  
在点击选择文件按钮的时候，会打开本地的文件夹选择一张图片，点击打开的时候，会触发onchange绑定的函数，发起请求。接收到返回值之后，再讲返回值渲染到页面上。  
![ddbe69e03056e5af182fe8186d54f0b0.gif][]

注意：

如果接口存在问题的话，要用postman测试一下  
postman测试上传图片接口步骤如下:

1：新建一个窗口  
将接口地址和请求方式填写一下  
![fc48d1e5103e1b96ddc6c70c4acb42d1.png][]

2:选择Body，选择form-data，选择File  
![7cc2f6c12b242f7a6f63e6559d692111.png][]

3:在KEY里面填写一下，file，不填写会出错，然后VALUE会出现选择本地图片的选项。  
![5798379aeb6b9b751b22685abfc0bbc8.png][]

4：选择完本地图片之后，点击send发送  
一般到这步就能看到返回值了  
![490e784d7b28abcaf3ae819add5f56d7.png][]

[3537e458cc0382e6ea08b3207fe20c7e.png]: /images/20221120/b8a5e498df25486ead5d137245d76f04.png
[a2540ad46930d045960ef7813a8ee85f.png]: /images/20221120/378f3480a28f4483a0433d727d78d818.png
[ddbe69e03056e5af182fe8186d54f0b0.gif]: /images/20221120/15d723a5b104437fa149e6a1b2ab05a8.png
[fc48d1e5103e1b96ddc6c70c4acb42d1.png]: /images/20221120/fc0d8d41cce44702943868a5797729e2.png
[7cc2f6c12b242f7a6f63e6559d692111.png]: /images/20221120/eb600e50a76340db9a89b5fc647c2834.png
[5798379aeb6b9b751b22685abfc0bbc8.png]: /images/20221120/b5a10ef28bcc4c47bb170f4dd8e8a0f4.png
[490e784d7b28abcaf3ae819add5f56d7.png]: /images/20221120/084ecc87a24e407286a84bbe3e8a447b.png