JS原生之文件上传系列（单文件上传_基于FromData）

第一节：使用from-data实现文件上传，包括文件大小限制，格式限制

使用自执行函数避免赞成全局污染

/* 基于FORM-DATA实现文件上传 */
(function () {
    //获取节点
    let upload = document.querySelector('#upload1'),
        upload_inp = upload.querySelector('.upload_inp'),
        upload_button_select = upload.querySelector('.upload_button.select'),
        upload_button_upload = upload.querySelector('.upload_button.upload'),
        upload_tip = upload.querySelector('.upload_tip'),
        upload_list = upload.querySelector('.upload_list');
    let _file = null;

    // 上传文件到服务器
    const changeDisable = flag => {
        if (flag) {
            //控制按钮的显示
            upload_button_select.classList.add('disable');
            upload_button_upload.classList.add('loading');
            return;
        }
        //控制按钮的隐藏
        upload_button_select.classList.remove('disable');
        upload_button_upload.classList.remove('loading');
    };
    //事件监听
    upload_button_upload.addEventListener('click', function () {
        if (upload_button_upload.classList.contains('disable') || upload_button_upload.classList.contains('loading')) return;
        if (!_file) {
            alert('请您先选择要上传的文件~~');
            return;
        }
        changeDisable(true);
        // 把文件传递给服务器：FormData / BASE64
        let formData = new FormData();
        formData.append('file', _file);
        formData.append('filename', _file.name);
        instance.post('/upload_single', formData).then(data => {
            if (+data.code === 0) {
                alert(`文件已经上传成功~~,您可以基于 ${data.servicePath} 访问这个资源~~`);
                return;
            }
            return Promise.reject(data.codeText);
        }).catch(reason => {
            alert('文件上传失败，请您稍后再试~~');
        }).finally(() => {
            clearHandle();
            changeDisable(false);
        });
    });

    // 移除按钮的点击处理
    const clearHandle = () => {
        _file = null;
        upload_tip.style.display = 'block';
        upload_list.style.display = 'none';
        upload_list.innerHTML = ``;
    };
    upload_list.addEventListener('click', function (ev) {
        let target = ev.target;
        if (target.tagName === "EM") {
            // 点击的是移除按钮
            clearHandle();
        }
    });

    // 监听用户选择文件的操作
    upload_inp.addEventListener('change', function () {
        // 获取用户选中的文件对象
        //   + name：文件名
        //   + size：文件大小 B
        //   + type：文件的MIME类型
        let file = upload_inp.files[0];
        if (!file) return;

        // 限制文件上传的格式「方案一」
        // 
        /* if (!/(PNG|JPG|JPEG)/i.test(file.type)) {
            alert('上传的文件只能是 PNG/JPG/JPEG 格式的~~');
            return;
        } */

        // 限制文件上传的大小
        if (file.size > 2 * 1024 * 1024) {
            alert('上传的文件不能超过2MB~~');
            return;
        }

        _file = file;

        // 显示上传的文件
        upload_tip.style.display = 'none';
        upload_list.style.display = 'block';
        upload_list.innerHTML = `<li>
            <span>文件：${file.name}</span>
            <span><em>移除</em></span>
        </li>`;
    });

    // 点击选择文件按钮，触发上传文件INPUT框选择文件的行为
    upload_button_select.addEventListener('click', function () {
        if (upload_button_select.classList.contains('disable') || upload_button_select.classList.contains('loading')) return;
        upload_inp.click();
    });
})();

后期推出基于BASE64的单文件上传、缩略图、进度条管控、多文件上传、拖拽上传以及大文件上传。