本文只实现了基本功能，具体一些判断用户传入的是否是图片等，请自行修改：（上传文件，简单方法：/sinat_35747438/article/details/81480757）
前端html部分：
<body><form id="up" enctype="multipart/form-data" method="post"><input type="file" onchange="change(this)" accept="image/gif,image/jpeg,image/png,image/jpg" id="upload" multiple="multiple"><input type="button" onclick="changeImg()" value="上传"><div id="image"></div></form></body>
JS部分：
前面必须引入Jquery：
<script src="/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">var imgFile = null;//将图片进行编码后发送到后台function getBase64Image(img) {var readImg = new FileReader();readImg.readAsDataURL(img);readImg.onload = function (readEvent){var base64 = readEvent.target.result;//console.log(base64);$("#image").attr("src", base64);$.ajax({type:"post",url:"sendBase",data:{"bases":base64,"name":img.name},dataType:"json",success:function(data){//alert(data);if(data == "1"){console.log("上传成功");}else{console.log("上传失败");}}});};}//循环选择的图片function changeImg() {var read = new FileReader();var allFiles = imgFile.files;for(var i=0; i < allFiles.length; i++){var file = allFiles[i];getBase64Image(file);}}//当选择图片后，显示出图片function change(img){imgFile = img;var allFiles = imgFile.files;for(var i=0; i < allFiles.length; i++){var img = allFiles[i];$("img").remove();var readImg = new FileReader();readImg.readAsDataURL(img);readImg.onload = function (readEvent){var base64 = readEvent.target.result;var appd = "<img src=\""+base64+"\" width=\"200px\" height=\"200px\">";$("#image").append(appd);};}}</script>
Java后端部分：使用的SpringBoot
@RequestMapping(value = "/", method = RequestMethod.GET)public String home(Locale locale, Model model) {return "test";}@RequestMapping("sendBase")@ResponseBodypublic String sendBase(String bases,String name){//System.out.println("bases:"+bases);System.out.println("name:"+name);//String before = bases.substring(bases.indexOf("/") + 1, bases.indexOf(";"));//System.out.println("before:"+before);String substring = bases.substring(bases.indexOf(",")+1);//System.out.println("sub:"+substring);boolean generateImage = GenerateImage(substring,name);if(generateImage == true){return "1";}else{return "2";}}//base64字符串转化成图片 public static boolean GenerateImage(String imgStr,String name) { //将前端传过来的Base64解码并生成图片 //判断图像数据为空if (imgStr == null) return false;BASE64Decoder decoder = new BASE64Decoder();try{//Base64解码 byte[] b = decoder.decodeBuffer(imgStr); for(int i=0;i<b.length;++i){ if(b[i]<0){b[i]+=256; }}//生成图片String imgFilePath = "D:\\test\\1\\"+name; OutputStream out = new FileOutputStream(imgFilePath);out.write(b);out.flush();out.close();return true;}catch (Exception e){//e.printStackTrace();return false;}}
演示：
选择完成之后，页面会显示选择的图片：（虽然丑，将就看下吧）
点击上传之后：（按F12）
如果觉得《js原生同时上传多张图片到Java后端远程服务器 页面显示图片 后端使用springboot》对你有帮助，请点赞、收藏，并留下你的观点哦！
