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

How to validate a file input on client side (Javascript)

本文关键字：输入 Javascript 文件 验证 客户端      更新时间：2023-09-26

我有一个表单存储在下面的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"文件类型。如果文件类型正确，则显示加载栏并上传表单。如果文件类型不正确，则显示 n 条警报，指出文件类型不正确，但不显示加载栏，也不上传表单。

有谁知道如何编码。这样我就可以使用您的答案之一中的示例进行扩展，并使用 javascript 来验证更多文件类型和文件大小，因此如果有人可以帮助我，这将非常有帮助。

谢谢

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在不久的将来）

你可以这样检查...

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

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

试试这个：

 $("#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;
    }
});
这是我

的解决方案，它非常简单快捷

    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');
    }
相关文章：