php - Javascript 检测选择附加到表单的文件的名称，如果用户选择了错误的文件则发出警报

Question

我有一个带有用于上传文件的输入字段的 HTML 表单。我希望选择的文件与所需的正确文件名 (mcust.csv) 匹配。如果他们选择了不同的文件，我想用 JS 触发错误。

表格如下:

<form name="upload-form" id="upload-form" action="upload-information.php" enctype="multipart/form-data" method="post">

    <input type="file" name="dealers_csv" id="dealers_csv" required="required" data-message="Please attach the mcust.csv file.">

    <button type=\"submit\" name=\"Submit\" id=\"Submit\" class=\"csbutton-color upload-button\" style=\"margin-right:10px;\" >Submit files</button><img id=\"loader\" src=\"../images/loading.gif\" style=\"display:none;\"/>

</form>

用户附加文件后，我想检测文件名 (mcust.csv)，如果文件名不是 mcust.csv，我想要在提交表单之前使用 Javascript/jQuery“做某事”(显示错误)。

这是 JS:

$(document).ready(function () {
    $("#upload-form").validator({
        position: 'top center',
        offset: [-12, 40],
        relative: true,
        accept: "csv",
        message: '<div><em></em></div>'
    })
    // make sure that mcust.csv is the attached file. If not, throw alert message
    $("input#dealers_csv").on("change", function() {
        var dealers = $("input#dealers_csv");
        var arrfilepath = dealers.val().split("\\");
        var filename = arrfilepath[arrfilepath.length - 1];
        if (filename != "mcust.csv") {
            alert("Wrong file! Please select 'mcust.csv'");
            dealers.val('');
        }
    });
    // make sure that morders.csv is the attached file. If not, throw alert message
    $("input#orders_csv").on("change", function() {
        var orders = $("input#orders_csv");
        var arrfilepath2 = orders.val().split("\\");
        var filename2 = arrfilepath2[arrfilepath2.length - 1];
        if (filename2 != "morders.csv") {
            alert("Wrong file! Please select 'morders.csv'");
            orders.val('');
        }
    });

});

编辑:我已将上述代码更新为工作版本。一个问题:如果他们附加了错误的文件，是否有一种方法可以显示数据消息而不是“警告”？

Answer 1

1. 禁用 HTML 表单提交。否则 HTML 提交将优先于 JS。
2. 向提交按钮添加 onclick/click 事件。
3. 点击事件会调用一个函数来验证您的数据。

4. 如果数据正常，通过 JavaScript 提交表单。

   <script>
      function validate(){
   
       if (document.getElementById('dealers_csv').value != 'mcust.csv'){
           alert('Filename must be mcust.csv');
       }else{
           document.getElementById('upload-form').submit();
       }
    }
   </script>
   
   
   <form name="upload-form" id="upload-form" enctype="multipart/form-data" method="post">
   
      <input type="file" name="dealers_csv" id="dealers_csv">
   
      <input type="button" value="Submit" onclick="validate()"/>
   
    </form>