php - 如何使用 jquery Ajax 验证文件类型

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">