在网页上传数据到sqlite的数据库是开发高频应用事项。该事项一般都会有一个判断是否选择了上传数据的环节。结合实践，大致归纳一下其核心思路和流程。

以下面这个页面为例。

Js判断html提交excel数据是否存在_判断提交数是否存在

该页面主要功能是选择一个excel表格导入到对应的数据库中。但是在导入过程中，如果用户直接点击“点击导入"按钮,代码会报错

Js判断html提交excel数据是否存在_提交表单_02

解决这个问题，需要在HTML表单中增加判断post是否存在‘excel_file'的表单字段。这里我们使用JavaScript来实现。在<head>标签内添加<script>标签，然后在<script>标签内编写JavaScript代码。具体步骤为：

1、获取表单元素;

2、监听表单提交事件;

3、阻止表单的默认提交行为;

4、检查表单数据中是否存在'excel_file'字段;

 如果存在则提交表单，否则提示用户选择上传文件;

添加JavaScript后的html文件

<!DOCTYPE html>
<html>
<head>
    <title>导入excel文件</title>
    <script>
        function checkFile() {
            var form = document.querySelector('form');
            form.addEventListener('submit', function(event) {
                event.preventDefault(); // 阻止表单默认提交行为
                var fileInput = form.elements['excel_file'];
                if (fileInput.files.length > 0) {
                    // 文件存在，提交表单
                    form.submit();
                } else {
                    // 文件不存在，提示用户上传文件
                    alert('请选择一个文件');
                }
            });
        }
    </script>
</head>
<body onload = "checkFile()">
    <h3>导入excel文件</h3>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="excel_file" accept=".xlsx">
        <button type="submit">点击导入</button>
    </form>
</body>
</html>

启动运行页面文件，这时当用户忘记选择文件直接点击了"点击导入"按钮后，页面会弹出如下提示

Js判断html提交excel数据是否存在_表单_03

经测试，代码其他功能运行都正常。这里说明一点，阻止表单的默认提交行为是为了能够在提交表单时执行一些自定义的操作，例如异步提交、表单验证或页面更新等。这通常通过JavaScript来实现，例如使用事件对象的preventDefault()方法。

除此之外，阻止表单的默认提交行为还有利于我们在需要的时候控制表单的提交流程。例如，在使用Ajax进行表单提交的时候，如果我们没有阻止表单的默认提交行为，那么在执行Ajax提交之后，浏览器页面会自动刷新。