怎样用js实现上传图片到服务器的功能？

发布时间：2022-02-25 13:51:44 所属栏目：语言来源：互联网

导读：这篇文章主要介绍js实现上传图片到服务器的功能，下文有实现的代码以及注释，对大家学习怎样实现上传图片到服务器有一定的帮助，感兴趣的朋友可以借鉴参考，接下来小编带着大家一起了解看看。 HTML //多张图片上传multiple input type=file id=file multiple

这篇文章主要介绍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>

（编辑：周口站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!