jQuery+ajax 图片上传接口功能_jquery ajax 上传图片-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_68695044/article/details/133046367

本文介绍了如何使用HTML表单和AJAX技术，通过POST方式上传二进制图片到接口，并接收返回的URL路径。提及了批量上传的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

很常用的功能，理论也很简单，用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循环即可。

效果展示：