图片上传
后端接口：
curl -X POST -F "image=@<待检测图片路径>" -o result.png http://139.159.177.164:7999/predict
解释说明：
使用curl 模拟HTTP请求，例如cur -X POST -F "image=@e:\temp\2_1.png" -o result.png ...
-o 是检测图片输出路径
- 如何自定义一个按钮上传图片
思路：将input按钮隐藏，在按下自定义按钮时，触发对input的onclick事件
- 使用formData
FormData 对象用以将数据编译成键值对，以便用 XMLHttpRequest 来发送数据。
主要用于：发送表单数据，也可用于发送带键数据(keyed data)，而独立于表单使用。
- Ajax上传文件
jquery获取img的src值：注意！！！ $("img")获取到的是页面全部的img标签，为一个数组，所以需要指定为哪一个img.
("img")[0].src
("img").src
图片展示
-
使用FileReader
-
在click中图片的隐藏与显示——使用*$('.spam').style.display = 'none'
开发中遇到的bug-Uncaught TypeError: $(...).css is not a function
接收服务器图片并展示
传回的数据：一个二进制文件，长下面这样。
-
使用Uint8Array
Uint8Array数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。 -
使用String.fromCharCode()
静态 String.fromCharCode() 方法返回由指定的 UTF-16 代码单元序列创建的字符串。
- 参考资料
利用Data URL(data:image/jpg;base64,)将小图片生成数据流形式
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CodePen - particles.js demo</title>
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- particles.js container -->
<div id="particles-js">
<div class="box w">
<div class="upload w">
<span></span>
<span style="left: 178px;"></span>
<span></span>
<span style="left: -176px;"></span>
<img src="">
</div>
<div class="log w">
<!-- 用于读取图片 -->
<button class="custom-btn btn-4 input-img"><span>上传图片</span></button>
<input type="file" accept="image/*" style="display: none;">
<button class="custom-btn btn-4 test"><span>开始检测</span></button>
</div>
</div>
</div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<!-- partial -->
<script src="./script.js"></script>
<script type="text/javascript">
<!--获取服务器传回的二进制文件，转为base64展示-->
function toBase64(res) {
var binary = "";
var bytes = new Uint8Array(res);
var len = bytes.byteLength;
for (var i = 0; i < len; i++) {
binary += String.fromCharCode(bytes[i]);
}
console.log();
return "data:img/jpeg;base64," + window.btoa(binary);
}
$(function () {
const upData = new FormData();
<!--在重新点击上传图片时，先将input的value置空，再重新触发点击事件-->
$(".input-img").click(function () {
$("input[type='file']").value = "";
<!--在自定义按钮触发onclick时，触发原本的input按钮的onclick事件-->
$("input[type='file']").click();
})
$("input[type='file']").change(function (e) {
if (e.target.files) {
upData.append('image', e.target.files[0]);
let render;
render = new FileReader();
render.readAsDataURL(e.target.files[0]);
$('img')[0].style.display = 'block';//只有该方法生效
}
<!--加载图片-->
render.onload = function (e) {
$('img')[0].src = e.target.result;//jQuery获取img的src，因为$("img")获取到的是整个页面所有的img标签，是一个数组，只有明确指定是哪一个的src的时候，才能取到具体的src值
}
})
<!--传值给后端检测-->
$(".test").click(function () {
alert('正在检测，请稍后。。。');
$.ajax({
type: 'post',
url: "http://139.159.177.164:7999/predict",
data: upData,
cache: false,
processData: false,
contentType: false,
xhrFields: { responseType: 'arraybuffer' },
success: function (res) {
$('img')[0].src = toBase64(res);
}
})
})
})
</script>
</body>
</html>
