javascript - 表单提交时检查文件类型？

Question

我有包含以下字段的表单，

<form onsubmit="return checkcreateform()" action="/gallery/create" method="post" enctype="multipart/form-data">
   <label>Type:*</label>
    <label for="type-1">
     <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
    </label>
   <br>
   <label for="type-2">
   <input type="radio" value="2" id="type-2" name="type">Video
   </label>  
   <label class="itemdetailfloatL required" for="file">File:*</label>
   <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
   <input type="file" tabindex="5" class="text-size text" id="file" name="file">
 <input type="submit" value="Create" id="submit" name="submit">
</form>

我想在表单提交之前进行验证。在这里我如何验证用户是选择类型作为图像并上传视频还是选择类型作为视频并上传图像？

我们可以通过 javascript 或 jquery 实现这一点。有什么快速验证方法吗？

请帮我解决这个问题。

Answer 1

不使用 onsubmit，而是使用 jQuery 的提交处理程序，并使用如下所示的一些 javascript 进行验证:

function getExtension(filename) {
  var parts = filename.split('.');
  return parts[parts.length - 1];
}

function isImage(filename) {
  var ext = getExtension(filename);
  switch (ext.toLowerCase()) {
    case 'jpg':
    case 'gif':
    case 'bmp':
    case 'png':
      //etc
      return true;
  }
  return false;
}

function isVideo(filename) {
  var ext = getExtension(filename);
  switch (ext.toLowerCase()) {
    case 'm4v':
    case 'avi':
    case 'mpg':
    case 'mp4':
      // etc
      return true;
  }
  return false;
}

$(function() {
  $('form').submit(function() {
    function failValidation(msg) {
      alert(msg); // just an alert for now but you can spice this up later
      return false;
    }

    var file = $('#file');
    var imageChosen = $('#type-1').is(':checked');
    if (imageChosen && !isImage(file.val())) {
      return failValidation('Please select a valid image');
    } else if (!imageChosen && !isVideo(file.val())) {
      return failValidation('Please select a valid video file.');
    }

    // success at this point
    // indicate success with alert for now
    alert('Valid file! Here is where you would return true to allow the form to submit normally.');
    return false; // prevent form submitting anyway - remove this in your environment
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/gallery/create" method="post" enctype="multipart/form-data">
  <label>Type:*</label>
  <label for="type-1">
     <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
    </label>
  <label for="type-2">
   <input type="radio" value="2" id="type-2" name="type">Video
    </label> <br />
  <label class="itemdetailfloatL required" for="file">File:*</label>
  <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
  <input type="file" tabindex="5" class="text-size text" id="file" name="file">
  <br/>
  <input type="submit" value="Create" id="submit" name="submit">
</form>

在 IE8、RockMelt(基于 Chrome)和 Firefox 7 中测试:http://jsfiddle.net/Ngrbj/4/