<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<!--上传文件-->
<div id="uploadDiv">
<form id="uploadForm" enctype="multipart/form-data">
文件:<input id="file" type="file" name="image"/>
<input type="text" style="display: none" name="token" value="8d1dbbf08efdfba61af9667a4d3d4efb"/>
</form>
<button id="upload">上传文件</button>
</div>
<!--结果运用-->
<div id="resFrom">
<form id="resForm" enctype="multipart/form-data">
图片地址：<input type="text" id="url" name="url" value="图片地址">
<br>
缩略图地址：<input type="text" id="thumb" name="thumb" value="缩略图地址">
<br>
删除链接：<input type="text" id="delUrl" name="del" value="缩略图地址">
</form>
</div>
<!--图片展示-->
<div id="imgDiv">
<img id='img1' src=""/>
</div>
<!--js代码-->
<script type="text/javascript">
$(function () {
$("#upload").click(function () {
var token = '8d1dbbf08efdfba61af9667a4d3d4efb'
var formData = new FormData($('#uploadForm')[0]);
$.ajax({
type: 'post',
url: "http://192.168.1.221:8081/api/index.php", //上传文件的请求路径必须是绝对路劲
data: formData,
cache: false,
processData: false,
contentType: false,
success: (res) => {
$('#img1').attr('src', res.url);
$('#imgs').append()
$('#url').attr('value', res.url);
$('#thumb').attr('value', res.thumb);
$('#delUrl').attr('value', res.del);
},
error: () => {
console.log("失败");
}
});
});
});
</script>
</body>
</html>