纯原生多图片上传

前言：现在上传图片的插件一波又一波，当然框架中也有图片上传的组件（antd 、elementui），但是总有需求与这些组件不相符（难受）作者是react党，常用就是antd，不久前就遇到一个很尴尬的需求：就是多张图片上传带有其它参数（注：发一次请求）antd的组件咋看咋不满足，哎，那就手撸一个吧。demo已上传到GitHub，欢迎star

一预览

纯原生多图片上传

ps: 样式什么的大家不要在意

二 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>图片上传</title>
    <link rel="stylesheet" href="css/tinyImgUpload.css">
</head>
<body>

<div id="upload">

</div>
<button class="submit">submit</button>
<script src="js/tinyImgUpload.js"></script>
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth*0.1+'px';

var options = {
    path: 'http://192.168.1.240:8090/cfAdmin/retrieval/retrievalPics.do?count=1&alarmThreshold=0.8',
    onSuccess: function (res) {
        console.log(res);
    },
    onFailure: function (res) {
        console.log(res);
    }
}

var upload = tinyImgUpload('#upload', options);
document.getElementsByClassName('submit')[0].onclick = function (e) {
    upload();
}
</script>
</body>
</html>

View Code

一 预览

二 html

一预览