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