前端图片上传功能，可删除，可限制上传张数，可限制图片的格式和大小，pc端移动端都通用。原生无依赖。

本文链接：https://blog.csdn.net/zhu709384145/article/details/81185683

html部分：

<div class="item">
    <div class="title small_title">上传项目图片</div>
    <div class="contain_upload">
        <div class="tip">包括但不限于：项目效果图、立面图、鸟瞰图、位置图、区位图、交通网络设施图、周边配套图、标识形象图等等</div>
        <div class="tip">仅限jpg|png|jpeg|gif格式，文件大小不超过10M</div>
        <div class="img_contain">
            <ul class="img_lists">
                <!--<li class="img_list" >
                    <img  class="img" src="/public/pc/images/zzlwang.ico" alt="">
                    <span class="del_img">删除</span>
                </li>
                <li class="img_list" >
                    <img  class="img" src="/public/pc/images/zzlwang.ico" alt="">
                    <span class="del_img">删除</span>
                </li>-->

            </ul>
            <div class="img_upload" >
                <input type="file"
                       name="file_img"
                       id="file_img"
                       class="file_img"
                       value=""
                       accept="image/jpg,image/jpeg,image/png,image/bmp"
                />
            </div>
        </div>

    </div>
</div>

css部分：

.item{
  padding-bottom: 20px;
  .small_title {
    font-weight: 700;
    background-color: #e2dbcf;
    height: 60px;
    padding-left: 23px;
    font-size: 20px;
    line-height: 60px;
    margin-bottom: 40px;

  }

.contain_upload{
  color: #666;
  overflow: hidden;
  .tip{
    padding-left: 30px;
  }
  .img_contain{
    padding: 30px;
    .img_lists {
      margin: 0;
      padding: 0;
      list-style: none;
      float: left;
      text-align: center;
      .img_list {
        width: 150px;
        height: 150px;
        float: left;
        margin-right: 17px;
        margin-left: 17px;
        margin-bottom: 30px;
        position: relative;
        border: 2px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
        .img {
          width: 150px;
          height: 150px;
        }
        .del_img {
          position: absolute;
          left: 0;
          bottom: 0;
          display: inline-block;
          width: 146px;
          height: 30px;
          background-color: rgba(0,0,0,.2);
          line-height: 30px;
          color: #fff;
        }
      }
    }
    .img_upload {
      width: 150px;
      height: 150px;
      box-sizing: border-box;
      float: left;
      border: 2px dashed #ccc;
      border-radius: 5px;
      text-align: center;
      background: url("/public/pc/images/upload.png") no-repeat center center;
      overflow: hidden;
      .file_img {
        width: 100%;
        height: 100%;
        opacity: 0;
        width: 100%;

      }

    }
  }

}

}

js部分：

//图片上传的change 事件
var target_num = $(".img_lists li").length;
$("#file_img").change(function (e) {
    //上传钱检测文件的长度如果超过指定的张数的话就要隐藏上传的按钮

    // console.log("1")
    let files = e.target.files || e.dataTransfer.files;
    if (!files.length) {
        return;
    };
    // 检测图片
    // console.log(files)
     //验证的 图片的大写和格式的  函数
    function validateImg(file, ipt) {
        let reg = /\.(jpg|png|jpeg|gif)$/ig;
        let sizeMB = file.size / (1024 * 1024);
        // 验证文件是否是图片
        if (!reg.test(file.name)) {
            alert('请选择jpg,png,jpeg,gif文件上传');
            ipt.value = '';
            return false;
        }
        // 验证图片大小是否超过5M
        if (sizeMB > 10) {
            alert('请选择10M以下的图片');
            ipt.value = '';
            return false;
        }
        return true;
    }
    if (validateImg(files[0], e.currentTarget)) {
       var fileData = files[0];
        // console.log(fileData)
        let formData = new FormData();
        // console.log(fileData)
        formData.append('files', fileData);
        formData.append('token', token);
        uploadFile(formData, e.currentTarget);
    }
        else {
            return;
         }
});
    //图片上传的函数
    function uploadFile(formData, ipt) {
    let _page = this;
    let xhr = new XMLHttpRequest();
    xhr.open('POST',"upload/img" );
    xhr.onloadstart = function (e) {
        // console.log(e);
    }
    xhr.onloadend = function (e) {
        // console.log(e);
    }
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            //本地模拟成功的 请求
            if (xhr.status != 200) {
                // let rst = JSON.parse(xhr.responseText);
                // 上传成功后回调函数
                ipt.value = '';
                // console.log("ok")
                target_num+=1;
                console.log(target_num);
               var  rst = {
                    "code":200,
                    "data":{
                        "host":"http://fph-property.oss-cn-hangzhou.aliyuncs.com/",
                        "path":"other/20170321/616d565574d583d599612d09295f9e6c.png"
                    },
                    "message":"ok"
                };
                console.log("ok")
                //把返回的数据的 数据放在一个数组里
                //  imgPathArr.push(rst.data.path);
                // console.log(imgPathArr);
                //创建一个img标签
                var $img = $("<img class='img' >");
                $img.attr("src",rst.data.host+rst.data.path) ;
                //创建一个删除的标签
                var $del_img =$("<span class='del_img'> 删除</span>")
                //创建一个li标签
                var $img_list = $("<li class='img_list'></li>")
                //把li标签放添加在ul里
                $(".img_lists").append($img_list);
                //把图片放在里里面
                $img_list.prepend($img);
            //    把删除的按钮放在li里里面
                $img_list.prepend($del_img)

            //    在这里去获取 已经上传的图片的个数
            //     var img_num = $(".img_list").length;
                // console.log(img_num);
                //如果大于了指定的张数的移除上传的按钮
                console.log(target_num)
                if(target_num>=12){
                    $(".img_upload").hide();
                }
                //点击图片的删除按钮  删除该图片，并判当前的图片的张数，并显示上传按钮
                $(".del_img").click(function () {
                    target_num-=1;
                    console.log(target_num)
                    $(this).parent(".img_list").remove();
                    if(target_num<12){
                        $(".img_upload").show()
                    }
                })
            }
            else{
                // 上传失败的回调
                alert("上传图片失败")
                /*var rst = {
                    "code":200,
                    "data":{
                        "host":"http://fph-property.oss-cn-hangzhou.aliyuncs.com/",
                        "path":"other/20170321/616d565574d583d599612d09295f9e6c.png"
                    },
                    "message":"ok"
                }
                var $img_item = $("<img class='img_item' src='/public/pc/images/zzlwang.ico'>");
                $(".img_list").prepend($img_item)*/

            }
        }
    }
    xhr.send(formData);
};

使用须知：

1，后台接口要求是上传的是流文件；

写的很详细可以直接拿去用的呦，具体的针对不同的浏览器的兼容性的问题没有处理；

欢迎指正问题，共同进步；文件上传其实是一样的道理