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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
javascript String 对象
Apr 25 Javascript
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
Vue批量图片显示时遇到的路径被解析问题
Mar 28 Javascript
浅谈layui 表单元素的选中问题
Oct 25 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
React更新渲染原理深入分析
Dec 24 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
You might like
PHP OPCode缓存 APC详细介绍
2010/10/12 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
React-Native做一个文本输入框组件的实现代码
2017/08/10 Javascript
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
在漏洞利用Python代码真的很爽
2007/08/26 Python
Python 面向对象 成员的访问约束
2008/12/23 Python
python查询mysql中文乱码问题
2014/11/09 Python
python字符串替换的2种方法
2014/11/30 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
jupyter notebook 重装教程
2020/04/16 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
英国在线花园中心:You Garden
2018/06/03 全球购物
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
DTD的含义以及作用
2014/01/26 面试题
学生党支部先进事迹
2014/02/04 职场文书
关于孝道的演讲稿
2014/05/21 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
环保志愿者活动总结
2014/06/27 职场文书
党课培训心得体会
2014/09/02 职场文书
民主生活会对照检查材料(统计局)
2014/09/21 职场文书
2015年大学生工作总结
2015/04/21 职场文书
安全教育培训制度
2015/08/06 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
大学军训心得体会800字
2016/01/11 职场文书
2016五一手机促销广告语
2016/01/28 职场文书