如何使用jquery验证文件类型

Question

我刚开始做网络编程。我需要验证和上传一个文件。当文件类型不匹配时，我设置了两个条件，然后显示警告(“无效文件”)和第二个条件，即文件为空或匹配，然后插入数据。但是，当文件/图像类型为空时，无法插入数据。以下是我的HTML代码：

<form method="post" id="insert_form" enctype="multipart/form-data">
  <label>Enter Employee Name</label>
  <input type="text" name="name" id="name" class="form-control" />
  <br />
  <label>Enter Employee Address</label>
  <textarea name="address" id="address" class="form-control"></textarea>
  <br />
  <label>Select Gender</label>
  <select name="gender" id="gender" class="form-control">
    <option value="Male">Male</option>
    <option value="Female">Female</option>
  </select>
  <br />
  <label>Enter Designation</label>
  <input type="text" name="designation" id="designation" class="form-control" />
  <br />
  <label>Enter Age</label>
  <input type="text" name="age" id="age" class="form-control" />
  <br />
  <label>File</label>
  <br>
  <div>
    <img src="" id="pict" width="100px" class="img-thumbna">
  </div>
  <br>
  <input type="file" name="image" id="image">
  <br/>
  <input type="hidden" name="employee_id" id="employee_id" />
  <input type="submit" name="insert" id="insert" value="Insert" class="btn btn-success" />
</form>

我的验证代码：

function listMajors(auth) {
  const sheets = google.sheets({ version: 'v4', auth });
  sheets.spreadsheets.values.get({
    spreadsheetId: '1S5SDKN0t7jsiL_7LVPdpDWWay1_0Bv5LOAO9EaTw_8M',
    range: 'Sheet1!A:A',
  }, (err, { data }) => {
    if (err) return console.log('The API returned an error: ' + err);
    const rows = data.values;
    if (rows.length) {
      // console.log('Name, Major:');
      // Print columns A and E, which correspond to indices 0 and 4.
      rows.map((row) => {
        // console.log(`${row[0]}, ${row[4]}`);
      })
    } else {
      console.log('No data found.');
    }
  });
}

$("#insert_form").on('submit', function (event) {
  event.preventDefault();
  var exten = $("#image").val().split('.').pop().toLowerCase();

  if ($("#name").val() == "") {
    alert('name is required');
  }
  else if (jQuery.inArray(exten, ['jpg', 'jpeg']) == -1) {
    alert("Invalid File");
  }
  else {
    $.ajax({
      url: 'insert.php',
      method: 'POST',
      data: new FormData(this),
      contentType: false,
      processData: false,

      beforeSend: function () {
        $("#insert").val('Inserting....');
      },
      success: function (data) {
        $("#add_data_Modal").modal('hide');
        $("#insert_form")[0].reset();
        $("#employee_table").html(data);
      }
    });

  }
});

你能帮我一下吗？

Answer 1

this.files是所选文件中的数组。

this.files[0].type.split('/')[1]获取文件的类型，并使用/拆分字符串。该文件的类型类似于image/jpg、image/png、text/plain等。

因此，您可以检查类型是否在有效的扩展数组中。

这里有一个简单的演示。

​

let validExt = ['jpg', 'jpeg']

$('input').on('change', function(){
  var extension = this.files[0].type.split('/')[1]
  console.log(this.files[0].type)
  if(validExt.indexOf(extension) == -1){
    alert('Invalid file.')
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file">

​

Answer 2

你需要对你的脚本做一点改动。

$("#insert_form").on('submit', function (event) {
    event.preventDefault();
    formData = new FormData($(this)[0]);//This will contain your form data
    var exten = $("#image").val().split('.').pop().toLowerCase();
    if ($("#name").val() == "") {
        alert('name is required');
    }
    else if (jQuery.inArray(exten, ['jpg', 'jpeg']) == -1) {
        alert("Invalid File");
    }
    else {
        $.ajax({
            url: 'insert.php',
            method: 'POST',
            data: formData,
            cache: false,// add this line too
            contentType: false,
            processData: false,
            beforeSend: function () {
                $("#insert").val('Inserting....');
            },
            success: function (data) {
                $("#add_data_Modal").modal('hide');
                $("#insert_form")[0].reset();
                $("#employee_table").html(data);
            }
        });
    }
});