＜input type=“file“＞实现上传文件

嗨害嗨，我又来了奥。今天讲一个项目中常见的例子，就是利用input type="file"来进行表单上传文件。首先，我们写好html，如下。

    <form id="form1" action="/" method="post" enctype="multipart/form-data">
        <div>
            <label for="profile_pic">Choose file to upload</label>
            <input multiple="multiple" type="file" id="profile_pic" name="profile_pic" accept=".jpg,.jpeg,.png">
        </div>
        <div>
            <button type="button" id="btn">提交</button>
        </div>
    </form>

这外面是一个form表单，method方法为post，action属性规定当提交表单时，向何处发送表单数据。（这是必需的属性），我们这里直接用‘/’代替了。enctype是encode type的缩写，就是编码类型的意思。默认情况下，enctype的值是application/x-www-form-urlencoded,不能用于文件上传，只有使用了multipart/form-data，才能完整的传递文件数据。

然后我们可以利用input type="file"来点击上传文件，multiple为多种多样的，在这里是代表可以上传多个文件（按住ctrl键就可以进行多选）。accept可以限制文件的上传类型，比如只上传图片文件、视频文件、音频文件等等。然后我们点击这个按钮，在没有写type="button"的时候，会发现不用写js直接就可以提交。为什么呢？原来button有一个type属性，而type有三个可选属性：button，submit，reset，而button按钮的type属性默认值是submit ，所以在没有指定type属性的情况下，点击button按钮触发提交form表单。解决：给button添加type属性，属性值设为button，问题就解决了。

现在写js进行表单验证，代码如下：

        const btn = document.getElementById("btn");
        const form1 = document.getElementById("form1");
        const pic = document.getElementById("profile_pic");
        btn.onclick = function () {
            //如果文件输入框的文件的长度为0，则弹出警告
            if (pic.files.length == 0) {
                alert("请先至少选择一个文件！");
                return;
            }
            //提交文件    HTMLFormElement.submit() 用来提交表单 <form>。
            //判断文件是否符合要求
            for (let i = 0; i < pic.files.length; i++) {
                console.log(i);  //0 1 2 3
                if (!checkFormat(pic.files[i])) {
                    alert("请确保上传的文件符合要求(.jpg/.png/.jpeg)")
                    return
                }
            }
            alert("上传成功!")
            form1.submit();
        }

        function checkFormat(o) {
            let filename = o.name;//文件名称
            let suffix = filename.substr(filename.lastIndexOf('.') + 1).toLowerCase();  //png jpg等
            let file_format = ['jpg', 'png', 'jpeg'];
            //看看这个后缀存不存在于file_format数组当中
            if (file_format.includes(suffix)) {
                return true
            }
            return false
        }

1、首先获取按钮，表单和input[type="file"]的dom对象，点击按钮的时候，判断：如果文件输入框的文件的长度为0，则弹出警告，然后return禁止提交。 

2、随后，有文件的情况下，点击提交会判断文件格式是否满足要求。这里封装了一个方法(checkFormat)，参数是一个对象，如果对象的name中最后一个"."的后缀名为规定的数组里面的值的话，就返回true，否则返回false。这里用到了ES6新特性中的includes方法，判断这个后缀名是否在这个数组里面。如果有一个不在，则弹出警告：请确保上传的文件符合要求(.jpg/.png/.jpeg)，再return禁止提交。

3、如果都满足的话，就提交成功。

如果有什么疑问，欢迎在评论区一起讨论，咱们下次见！