[英]How to validate a file input on client side (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. 它的作用是当用户点击提交时,它会显示一个加载栏并上传表单。
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. 现在我的问题是我想要执行一个简单的javascript验证,当用户点击表单中的提交按钮时,它将检查文件是'png'还是'gif'文件类型。 If it is correct file type, then display the loading bar and upload the form.
如果文件类型正确,则显示加载栏并上传表单。 If the file type is incorrect, then show an alert stating file type is incorrect but don't show the loading bar and do not upload the form.
如果文件类型不正确,则显示警告,说明文件类型不正确,但不显示加载栏,也不上传表单。
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 谢谢
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类型进行验证。
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在不久的将来)
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;
}
});
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');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.