js实现上传图片到服务器的

这篇文章主要介绍了js实现上传图片到服务器的，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

HTML

//多张图片上传multiple <input type="file" id="file" multiple> //原生提交按钮 <input type="submit">

javascript

<script>     // 定义一个接收转为base64图片的数组     let ArrayImg=[]     var index = 0;  //给图片加唯一标识 好删除     // 获取页面上的元素     let input=document.getElementById('file')     console.log(input);     // 绑定oncheange事件     input.onchange=function(){       var file=this.files[0]  //获取页面上选择的文件[N]指的是获取第几个       // console.log(file);       var iLen = this.files.length;  //获取图片长度       // console.log(iLen);       for(var i=0;i<iLen;i++){  //通过循环把多张图片显示到页面上或者上传       // 本地缓存 预览       var filereader = new FileReader()  //创建一个本地缓存的对象       // 把获取到的文件本地缓存转为bese64       filereader.readAsDataURL(this.files[i])  //转成base64，并存在了自由属性reader.result里           console.log([i]);         filereader.onload = function () { //通过onload 事件把this.result 取出来         // console.log(this.result,333);         ArrayImg.push(this.result)         // 通过html标签包括到img显示图片 放到一个变量中储存         let img1=`<div id="divimg"><img src="${this.result}" alt="" id="id_img"></div>`           // 创建一个新的div         let div = document.createElement('div')         div['index'] = index; // 给div加唯一标识好移除         // 把上传存好的img1放到新建的div里面         div.innerHTML=img1         console.log(ArrayImg,'图片数组');         //然后通过dom操作插入到dom树中 显示图片         document.getElementsByTagName('body')[0].appendChild(div) 　　//插入dom树         // console.log(img);         // 通过给div绑定单击事件 删除当前点击的div跟当前点击的图片数组中的base64地址         div.onclick = function(){                       this.remove();                  // 在页面中删除该图片元素                       delete ArrayImg[this.index];  // 删除ArrayImg数组对应的数据                     console.log(ArrayImg,'图片数组');                 }                 //inddex记录当前循环了多少次好移除ArrayImg数组中的链接地址         index++       }       }     } </script>

感谢你能够认真阅读完这篇文章，希望小编分享的“js实现上传图片到服务器的”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!