js实现上传图片到服务器

这篇文章主要为大家详细介绍了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>