简单基础的原生JS实现图片上传添加

随着我们时代的发展，交流沟通不仅仅是局限于面对面，互联网提供了更为方便便捷的交流方式，各种交流软件层出不穷。在我们使用这些社交软件时，往往都需要自己提交一些简单的数据，包括自己想的网名，密码，个人资料等等。其中，头像就是其中之一。有的时候，我们会觉得想换个头像。那，这是如何实现的呢？

1.我们先做一个简单的页面布局

简单的做了一个图书app的图书添加页面。在图片上传处其实是个input标签，类型为file，只不过将他隐藏起来，用一个正方形框替代。当我们点击这个正方形图片框时，触发.click() 方法即可打开文件框 。HTML代码如下：

<header>添加图书</header>
   <main>
       <div id="bookName">
           <p>书名:</p>
           <input type="text" id="bkname">
       </div>
       <div id="bookType">
        <p>所属分类:</p>
        <input type="text" id="typ">
       </div>
       <div id="pic">
           图片:<div id="headPic"><img src="../../imgs/def.jpg" ></div>
         <input type="file" id="fil">
       </div>
       <div id="info">
        <p>简介:</p>
         <textarea></textarea>
       </div>
       <p><button type="button" id="btn">添加图书</button></p>
   </main>

2.如何实现点击图片框，上传一张图片呢

简单来说，我们点击图片上传框，点击需要上传的图片后。我们需要拿到我们上传图片(文件)的相关信息，通过发送ajax请求，将相关数据传到后端。后端响应回来数据后，我们在将得到的图片信息传在图片框内。(这里需要注意的是，通常我们上传数据格式为JSON格式，但是图片需要格式为FormData格式) 看如下代码：

     let fil = document.querySelector('#fil') // 文件框，只不过隐藏了起来
     let headPic = document.querySelector('#headPic') //图片上传框

	 headPic.addEventListener('click', function () {
        fil.click()  //点击上传图片，文件上传框打开
    })

    //头像上传
    fil.addEventListener('change', function (e) {//注意，头像上传时用的时change事件
        // console.log(this.files[0]);  //文件的信息都放在files里 
        let fd = new FormData()
        fd.append('imgurl', this.files[0])
        //原生ajax实现实现图片上传
        let xhr = new XMLHttpRequest() //创建ajax对象
        xhr.open('post', 'http://139.9.177.51:5000' + '/book/upload')
        xhr.send(fd)  //将格式处理好的数据，作为参数发送
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                let data = JSON.parse(xhr.responseText);
                console.log(data);

                img.src = 'http://139.9.177.51:5000' + data.imgurl
            }
        }
    })

这样就实现了简单的图片上传，也可以在另外页面进行渲染，不过需要通过相应的接口。实现头像（图片，文件）上传方式很多，这里是用原生Js来写，是为了方便理解基础性的知识哦！