js实现上传图片到服务器


Posted in Javascript onApril 11, 2021

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js正确获取元素样式详解
Aug 07 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
js时间控件只显示年月
Jan 08 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
12条写出高质量JS代码的方法
Jan 07 Javascript
webpack4 + react 搭建多页面应用示例
Aug 03 Javascript
express启用https使用小记
May 21 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
You might like
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
setInterval与clearInterval的使用示例代码
2014/01/28 Javascript
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
jquery使用经验小结
2015/05/20 Javascript
JS实现下拉菜单赋值到文本框的方法
2015/08/18 Javascript
AngularJs  unit-testing(单元测试)详解
2016/09/02 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
JS实现获取数组中最大值或最小值功能示例
2019/03/02 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
python连接sql server乱码的解决方法
2013/01/28 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python常用知识点汇总
2016/05/08 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
python实现猜单词小游戏
2020/05/22 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
Python后台管理员管理前台会员信息的讲解
2019/01/28 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
HTML5中的新元素介绍
2008/10/17 HTML / CSS
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
留学推荐信中文范文三篇
2014/01/25 职场文书
红旗方阵解说词
2014/02/12 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
先进个人主要事迹范文
2015/11/04 职场文书
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
Nginx 配置 HTTPS的详细过程
2022/05/30 Servers