js实现上传图片到服务器
网络编程 2021-07-04 14:07www.168986.cn编程入门
这篇文章主要为大家详细介绍了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:JavaScript实现复选框全选功能
下一篇:JavaScript实现循环轮播图
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程