js原生实现拖拽上传文件和点击上传文件

1.公司想做一个小工具，需要编写原生的html配合后端实现一个功能，其中用到了文件的上传

2.其中系统默认的文件上传框太丑了所以需要将原生的给隐藏掉，这里贴html和css部分

  <div class="content-form-item">
//这只是form表单的一部分由于原生的input样式无法修改只能将其隐藏，利用其他的占用
                        <label for="file" >物资消耗：</label>
                        <div class="upload" >选择文件</div>
                        <div class="upload-title"></div>
                        <div class="upload-icon"></div>
                        <input type="file" name="file" id="file">
  </div>
//modal弹窗
        <div class="modal" >
            <div class="modal-box">
                <div class="modal-box-head">选择文件</div>
                <div class="modal-box-content">
                    <div class="modal-box-content-import">

                    </div>
                    <div class="modal-box-content-title">
                        点击拖拽上传数据文件
                    </div>
                    <div class="modal-box-content-hint">
                        支持1MB以内的.xls\.xlsx格式文件，单次上限为5000条数据若数据进入流程，单次上限为1000条数据
                    </div>
                    <div class="modal-box-content-export">
                        <div class="export-icon"></div>
                        <div class="export-title"><a href="/static/excel/物资消耗模板.xlsx" th:href="@{/static/excel/物资消耗模板.xlsx}">下载物资消耗模板</a></div>
                    </div>
                </div>
                <div class="modal-box-foot">
                    <button class="modal-box-foot-button" >取消</button>
                </div>
            </div>
        </div>
//css代码
<style>
      /* 弹窗 */
    .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
    }

    .modal-box {
        margin: 50vh auto 0;
        width: 580px;
        height: 518px;
        transform: translateY(-50%);
        background: #FFFFFF;
        border-radius: 16px 16px 16px 16px;
        opacity: 1;
    }

    .modal-box-head {
        height: 24px;
        width: 100%;
        font-size: 20px;
        color: rgba(0, 0, 0, 0.8);
        text-align: center;
        padding: 40px 0 36px;
    }

    .modal-box-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 360px;
        height: 300px;
        margin: 0 auto;
        background: #EEF4F9;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
    }

    .modal-box-content-import {
        width: 100px;
        height: 100px;
        margin-top: 24px;
        background: #2E5371;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        /* border: 1px dashed #acaeaf; */
        background: url('./srcdata/import-icon.png') no-repeat;
        background-size: 100% 100%;
    }

    .modal-box-content-title {
        width: 160px;
        height: 24px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.75);
        line-height: 24px;
        margin: 16px 0;
    }

    .modal-box-content-hint {
        width: 298px;
        height: 34px;
        font-size: 12px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #6B8295;
        line-height: 14px;
    }

    .modal-box-content-export {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 136px;
        height: 20px;
        margin-top: 16px;
    }

    .export-icon {
        width: 20px;
        height: 20px;
        /* border: 1px dashed #acaeaf; */
        background: url('./srcdata/export-icon.png') no-repeat;
        background-size: 100% 100%;
    }

    .export-title > a {
        width: 112px;
        height: 20px;
        font-size: 14px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #2E5371;
        text-decoration: none;
        line-height: 20px;
    }
    .modal-box-foot {
        width: 74px;
        margin:  36px auto;
    }
    .modal-box-foot-button {
        width: 74px;
        height: 42px;
        border-radius: 6px 6px 6px 6px;
        opacity: 1;
        border: 1px solid rgba(0, 0, 0, 0.3);
        font-weight: 400;
        color: #555555;
        font-size: 22px;
        background-color: #FFFFFF;
        margin: 0 auto;
    }
    .modal-box-foot-button:active {
        background-color: #409EFF;
    }
    #file {
        display: none;
    }
    /* 选择文件后提示信息 */
    .upload-title{
        display: none;
        height: 42px;
        line-height: 42px;
    }
    .upload-icon {
        display: none;
      width: 10px;
      height: 10px;
      margin-left: 5px;
      background: url('./srcdata/delete.png') no-repeat;
        background-size: 100% 100%;
    }
</style>

2.这里写js部分

利用dom的点击方法调用原生的input file方法，直接实现点击上传文间

  // 上传文件
    let files = document.querySelector('#file')
    //  劳动强度列表
     let workerType = document.querySelector("#workerType")
    // 唤出弹窗按钮
    let showModal = document.querySelector(".upload");
    // 弹窗
    let modal = document.querySelector(".modal")
    // 取消弹窗按钮
    let cancelModal = document.querySelector(".modal-box-foot-button")
    // 拖拽上传区域
    let upload = document.querySelector(".modal-box-content")
    // 点击上传
    let clickImport = document.querySelector('.modal-box-content-import')
     // 文件名称
     let uploadTitle = document.querySelector('.upload-title')
    // 删除文件按钮
    let deleteFile = document.querySelector('.upload-icon')
    // 点击展示弹窗
    showModal.onclick = function() {
        modal.style.display  = "block";
    }
    // 点击关闭弹窗
    cancelModal.onclick = function() {
        modal.style.display  = "none";
    }
    // 点击上传按钮
    clickImport.onclick = function() {
        files.click()
    }
// 当文件上传后隐藏选择文件按钮，展示文件信息和删除按钮
 let  uploadFun = function(files)  {     
        console.log(files);
           if(files.length > 0) {
            uploadTitle.style.display = "block"
            deleteFile.style.display = "block"
            console.log();
           uploadTitle.innerHTML = files[0].name
           showModal.style.display = "none"
           modal.style.display  = "none";
        }
       
    }
//点击文件上传触发input flie的onchange事件，然后调用uploadFun方法
files.onchange = function() {
        uploadFun(files.files)
    }
//拖拽文件方法，需要使用 e.preventDefault()阻止浏览器默认行为
  upload.addEventListener('dragover', function (e) {
        e.preventDefault();
    })
    upload.addEventListener('drop', function (ev) {
        ev.preventDefault()
      let file = ev.dataTransfer.files;
 //将上传的文件file赋值给input
        files.files = file
//赋值后执行uploadFun方法
        uploadFun(files.files)
    })
    // 点击删除文件，将文件名称和删除按钮隐藏，显示选择文件按钮并清空input file的值
    deleteFile.onclick = function() {
        deleteFile.style.display = "none"
        uploadTitle.style.display = "none"
        showModal.style.display = "flex"
        files.value = ''
        // files.outerHTML = files.outerHTML; 
        // var files = document.querySelector('#file')
    //     files.onchange = function() {
    //     uploadFun(files.files)
    // }
    }

3.注意，开始清空input file上传框时用了files.outerHTML = files.outerHTML; 但后续发现会影响文件删除和上传，于是就用  files.value = ''。