如何在客户端（Javascript）验证文件输入

Question

我有一个存储在javascript变量中的表格如下：

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" +
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form>

现在你可以看到，当用户点击提交按钮时，它会提交至下面的“startImageUpload”函数：

function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}

当用户点击提交按钮时，它会显示一个加载条并上传表单。现在我的问题是，我想执行简单的JavaScript验证，当用户在表单中点击提交按钮时，它将检查文件是否为“png”或“gif”文件类型。如果是正确的文件类型，则显示加载条并上传表单。如果文件类型不正确，则显示警告，指出文件类型不正确，但不显示加载条，并且不上传表单。有人知道如何编写这段代码吗？这样我就可以使用你们其中一个答案的示例来扩展它，并使用JavaScript对更多文件类型和文件大小进行验证，所以如果有人能帮助我，那将非常有帮助。谢谢。

- user1324106

---

我建议您使用load()函数来加载表单，而不是仅仅创建一个问题多多、几乎无法使用的变量。 - elclanrs

Answer 1

function startImageUpload(imageuploadform){

  var form = $(imageuploadform)
    , value = form.find('.fileImage').val()

  form.find('.imagef1_upload_process').css('visibility','visible')
  form.find('.imagef1_upload_form').css('visibility','hidden')

  if (!/\.(png|gif)$/.test(value)){
    return false
  }
  return true
}

HTML规范还发展出了一个包括accept属性的版本：

<input type="file" accept="image/png,image/gif" />

（在Chrome，Firefox和Opera中支持 - IE10，Safari 6将来也会支持）

- Ricardo Tomasi

Answer 2

您可以这样检查...

var validExtensions = ['png', 'gif'],
    validExtensionSupplied = $.inArray(
           ($('.fileImage').val().match(/\.(.*?)]\s*$/) || [])[1],
           validExtensions) != -1;

或者，您可以通过检查 $('.fileImage').prop('files')[0].type 来验证 MIME 类型。

- alex

---

我也在想这样的东西。只是为了好玩，你可以使用波浪号运算符与-1进行比较，并使用!!强制转换为布尔值。虽然不太易读但更加紧凑。!!~$.inArray(($('.fileImage').val().match(/\.(.*?)$/) || [])[1], validExtensions) - elclanrs

Answer 3

试试这个：

 $("#pic").change(function() {

    var val = $(this).val();

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){
        case 'gif': case 'jpg': case 'png':
            alert("an image");
            break;
        default:
            $(this).val('');
            // error message here
            alert("not an image");
            break;
    }
});

- coder

Answer 4

这是我的解决方案，它非常简单和快速

    var accept = $(event.target).attr('accept');
    //<input name='fileImage' accept='.png,.jpg,.jpeg' type='file'  class='fileImage' />

    value = $(event.target).val(), ext = value.substring(value.lastIndexOf('.'));

    if(ext && accept.indexOf(ext) == -1){

        console.log('No');

    }

- Dennys Marquez