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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
JS定时器实例详细分析
Oct 11 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JAVA四种基本排序方法实例总结
Jul 24 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
js获取图片宽高的方法
Nov 25 Javascript
js实现页面跳转的几种方法小结
May 16 Javascript
详解javascript中对数据格式化的思考
Jan 23 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
详解如何使用router-link对象方式传递参数?
May 02 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
小程序实现侧滑删除功能
Jun 25 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 #Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
You might like
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
js DOM模型操作
2009/12/28 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
2012/05/03 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
浅谈js中几种实用的跨域方法原理详解
2016/12/02 Javascript
详解jQuery的表单验证插件--Validation
2016/12/21 Javascript
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
JS非行间样式获取函数的实例代码
2018/06/05 Javascript
浅谈React中组件逻辑复用的那些事儿
2020/05/21 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
对PyQt5基本窗口控件 QMainWindow的使用详解
2019/06/19 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
用python批量解压带密码的压缩包
2021/05/31 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python
python 闭包函数详细介绍
2022/04/19 Python