js上传图片并预览

 .layer_star {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
      .one,
      .add {
        width: 120px;
        height: 120px;
        border: 1px solid #f2f2f2;
        margin-left: 20px;
        position: relative;
      }
      .one img {
        width: 100%;
        height: 100%;
      }
      .add {
        padding: 20px;
        box-sizing: border-box;
      }
      .delete {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 5px;
        right: 5px;
      }
      .delete img {
        width: 100%;
        height: 100%;
      }
      .add input {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: absolute;
        opacity: 0;
      }
      .add img {
        width: 100%;
        height: 100%;
      }

<div class="layer_star">
      <div class="layer_star" id="result" name="result"></div>
      <div class="add">
        <input
          type="file"
          name="file"
          id="file"
          multiple="multiple"
          onchange="addUrl()"
        />
        <img src="./img/plus.png" alt="" />
      </div>
</div>

 var file;
    var arr = [];
    var i = 0;
    function addUrl() {
      file = document.getElementById("file").files; //获取当前选中图片的文档流
      var result = document.getElementById("result"); //需要添加的dom节点
      $.each(file, function (k, v) {
        //遍历上传图片获取到的数组
        arr.push(v); // file不是一个数组对象，所以删除某张图片的时候会报错。将数据重新push到一个新的数组中
        var reader = new FileReader(); //读取文件二进制流
        reader.readAsDataURL(file[k]); //readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
        reader.onload = function (e) {
          result.innerHTML = //动态添加dom
            result.innerHTML +
            '<div class="one" id="' +
            file[k].name +
            '">' +
            "<img src='" +
            this.result +
            "' alt='' />" +
            "<div class='delete' οnclick='deletes(\"" +
            file[k].name +
            "\")'>" +
            "<img src='" +
            "./img/shanchu.png" +
            "'  alt='' />";
          "<div/>" + " </div>";
        };
      });
    }
    function deletes(e) {
      $.each(arr, function (k, v) {
        console.log(v);
        if (e == v.name) {
          arr.splice(k, 1);
          k--;
        }
      });
    }