js实现上传图片到服务器

本文实例为大家分享了js实现上传图片到服务器的具体代码，供大家参考，具体内容如下

HTML

//多张图片上传multipleinput 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;
    iiLen;
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>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• js实现图片上传到服务器和回显
• Node.js HTTP服务器中的文件、图片上传的方法
• JSP+Servlet实现文件上传到服务器功能
• NodeJs实现简易WEB上传下载服务器
• 详解Node.js一行命令上传本地文件到服务器
• js实现图片粘贴上传到服务器并展示的实例
• 基于HTML5+js+Java实现单文件文件上传到服务器功能
• 利用nodejs监控文件变化并使用sftp上传到服务器
• NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
• Ajax上传实现根据服务器端返回数据进行js处理的方法

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！