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

I have a form stored in a javascript variable below:

我有一个表单存储在下面的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>

Now as you can see when the user clicks on the submit button, it submits to the 'startImageUpload' function which is below:

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

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

What it does is that when the user clicks on submit, it displays a loading bar and uploads the form.

它所做的是，当用户单击submit时，它会显示一个加载栏并上传表单。

Now what my question is that I want to perform a simple javascript validation where when the user clicks on the submit button in the form, it will check if the file either a 'png' or 'gif' file type. If it is correct file type, then display the loading bar and upload the form. If the file type is incorrect, then show a n alert stating file type is incorrect but don't show the loading bar and do not upload the form.

现在我的问题是，我想执行一个简单的javascript验证，当用户单击表单中的submit按钮时，它将检查文件是“png”还是“gif”文件类型。如果是正确的文件类型，则显示加载栏并上传表单。如果文件类型不正确，则显示一个n警告说明文件类型不正确，但不要显示加载栏，也不要上传表单。

Does anyone know how this can be coded. It is so I can use the example from one of your answers to then expand on it and use the javascript to validate on more file types and also file size so it will be very helpful if somebody can please help me.

有人知道这是怎么编码的吗?它是这样的，我可以使用你的一个答案来扩展它，并使用javascript来验证更多的文件类型和文件大小，如果有人能帮助我，它将非常有用。

Thank You

谢谢你！

4 个解决方案

#1

Try this:

试试这个:

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

#2

You can check like so...

你可以这样检查……

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

Alternatively, you can validate by MIME type by checking the $('.fileImage').prop('files')[0].type.

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

#3

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
}

The HTML specification also evolved to include an accept attribute:

HTML规范也演变为包含一个accept属性:

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

(supported in Chrome, Firefox and Opera - IE10, Safari 6 in the near future)

(近期支持Chrome、Firefox和Opera - IE10、Safari 6)

#4

This is my Solution, it is quite Easy and Fast

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

    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');

    }

#1