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 相关文章推荐
javascript测试题练习代码
Oct 10 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery使用方法
Feb 04 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
详解基于vue的移动web app页面缓存解决方案
Aug 03 Javascript
不使用 JS 匿名函数理由
Nov 17 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
You might like
codeigniter中测试通过的分页类示例
2014/04/17 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
thinkPHP内置字符串截取函数用法详解
2016/11/15 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
初学js插入节点appendChild insertBefore使用方法
2011/07/04 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
JavaScript中的DSL元编程介绍
2015/03/15 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
javascript事件模型介绍
2016/05/31 Javascript
AngularJS之页面跳转Route实例代码
2017/03/10 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python 3.7.0 安装配置方法图文教程
2018/08/27 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Python input函数使用实例解析
2019/11/22 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
迪卡侬比利时官网:Decathlon比利时
2019/12/28 全球购物
生物技术毕业生自荐信
2013/10/23 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
税务会计岗位职责
2014/02/18 职场文书
井冈山红色之旅感想
2014/10/07 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
vue实力踩坑之push当前页无效
2022/04/10 Vue.js