本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/a134468/article/details/115579529