图片上传并进行预览

先看一下 html代码 这里采用隐藏域 通过添加add的div 然后触发input的click方法来进行文件上传，这里你就可以对上传按键的按钮进行一个美化。

add.png

 <label for=""> <br>
<input type="file" name="" id="imgUpload" multiple=true accept="image/*" hidden="hidden">

                </label>
                <div class="add">
                    <div class="plus"> </div>
                </div>
                <div class="preview clearfix">
                    <!-- <img src="#" alt="" class = "previewImg"> -->
                </div>

再来看看js代码 首先需要对上传文件的添加一个change监听 通过this.files可以拿到文件列表
如果需要展示的话 可以使用window.URL.createObjectURL为每一个上传的文件产生一个对象url，
然后把对象url赋值给图片的src的属性 即可实现上传的时候进行图片的预览

 file.addEventListener('change', function (e) {
        // 获取用户上传的文件个数
        var length = this.files.length;
        for (let i = 0; i < length; i++) {
            var img = document.createElement('img');
            img.class = "previewImg";
            // size表示文件的大小，name表示上传的文件名字
            // console.log(this.files[i].size)
            // console.log(this.files[i].name)
            // preview是图片预览的容器
            img.src = window.URL.createObjectURL(this.files[i]);
            document.getElementsByClassName('preview')[0].appendChild(img)
        }

上传有两种方式: 1.fileReader 2.formData

    var fData = new FormData();
    var fRead = new FileReader();

      fRead.readAsDataURL(this.files[0]);
       fRead.addEventListener('load', function (e) {
      //获取到的是图片的base64编码，这里可以通过ajax把图片的64位编码发送到服务器
        let url = e.target.result; 
        // })
      // 通过append方法来追加数据 键值对的形式 然后上传到服务器就可以把fData上传上去
        fData.append('file',this.files[i])