Javascript 提交表单时检查文件类型？

我有一个表格，上面有以下字段

<form onsubmit="return checkcreateform()" action="/gallery/create" method="post" enctype="multipart/form-data">
   <label>Type:*</label>
    <label for="type-1">
     <input type="radio" checked="checked" value="1" id="type-1" name="type">Image
    </label>
   <br>
   <label for="type-2">
   <input type="radio" value="2" id="type-2" name="type">Video
   </label>  
   <label class="itemdetailfloatL required" for="file">File:*</label>
   <input type="hidden" id="MAX_FILE_SIZE" value="8388608" name="MAX_FILE_SIZE">
   <input type="file" tabindex="5" class="text-size text" id="file" name="file">
 <input type="submit" value="Create" id="submit" name="submit">
</form>

类型：*
形象


视频
文件：*

我想在提交表单之前进行验证。在这里，我如何验证用户是选择类型作为图像并上传视频，还是选择类型作为视频并上传图像

我们可以通过javascript或jquery来实现这一点。有没有快速的方法来验证这一点

请在这方面帮助我。

您可以尝试以下方法：

function getFile(fieldId) {
    var fileInsert = document.getElementById(fieldId).value;
        fileName = fileName.split('/');
        fileName = fileName[fileName.length];
        extentions = fileName.split('.');
        extentions = extentions[extentions.length];
    return extentions;
}

---

您可以在

checkcreateform（）中使用此函数。

首先，您应该像这样更改html：

///image 1 and video 2
//you can extend file types
var types= {
    'jpg' :"1",
    'avi' :"2",
    'png' :"1",
    "mov" : "2",
}

function checkeExtension(filename,submitId) {
    var re = /\..+$/;
    var ext = filename.match(re);
    var type = $("input[type='radio']:checked").val();
    var submitEl = document.getElementById(submitId);

    if (types[ext] == type) {
        submitEl.disabled = false;
        return true;
    } else {
        alert("Invalid file type, please select another file");
        submitEl.disabled = true;
        return false;
    }  
}

const validFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];

const fileTypeValid = (file, fileTypes) => {     
    return fileTypes.some((fileType) => fileType === file.type);
}

// ... call fileTypeValid with the two parameters

然后，您需要这样一个函数：

///image 1 and video 2
//you can extend file types
var types= {
    'jpg' :"1",
    'avi' :"2",
    'png' :"1",
    "mov" : "2",
}

function checkeExtension(filename,submitId) {
    var re = /\..+$/;
    var ext = filename.match(re);
    var type = $("input[type='radio']:checked").val();
    var submitEl = document.getElementById(submitId);

    if (types[ext] == type) {
        submitEl.disabled = false;
        return true;
    } else {
        alert("Invalid file type, please select another file");
        submitEl.disabled = true;
        return false;
    }  
}

const validFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];

const fileTypeValid = (file, fileTypes) => {     
    return fileTypes.some((fileType) => fileType === file.type);
}

// ... call fileTypeValid with the two parameters

---

不要使用

onsubmit

，而是使用jQuery的提交处理程序，并使用一些javascript进行验证，如下所示：

函数getExtension（文件名）{
var parts=filename.split（'.'）；
返回零件[零件长度-1]；
}
函数isImage（文件名）{
var ext=getExtension（文件名）；
开关（ext.toLowerCase（））{
案件‘jpg’：
案例“gif”：
案例“bmp”：
案例“png”：
//等
返回true；
}
返回false；
}
函数isVideo（文件名）{
var ext=getExtension（文件名）；
开关（ext.toLowerCase（））{
案例“m4v”：
案例“avi”：
案例“mpg”：
案例“mp4”：
//等
返回true；
}
返回false；
}
$（函数（）{
$（'form'）。提交（函数（）{
功能失效验证（msg）{
警报（msg）；//现在只是一个警报，但你可以在以后增加它的味道
返回false；
}
var file=$（'#file'）；
var ImageSelected=$（“#type-1”）。为（“：选中”）；
if（imageselected&！isImage（file.val（）））{
返回failValidation（'请选择有效图像'）；
}如果（！imageselected&！isVideo（file.val（）），则为else{
返回failValidation（'请选择有效的视频文件'）；
}
//在这一点上取得成功
//立即用警报指示成功
警报（'有效文件！此处返回true以允许表单正常提交'）；
return false；//无论如何阻止表单提交-在您的环境中删除此项
});
});

类型：*
形象
视频


文件：*


在输入时使用文件属性：文件您可以在文件对象中循环并检查类型属性


$（'#upload'）。关于（“更改”，函数（）{
var sel_files=document.getElementById（'upload'）.files；
var len=sel_files.length；
对于（变量i=0；i



提供的答案是可行的，但使用javascript数组函数，验证代码的行数会少很多，运行速度会快一些：

var extensionLists = {}; //Create an object for all extension lists
extensionLists.video = ['m4v', 'avi','mpg','mp4', 'webm'];  
extensionLists.image = ['jpg', 'gif', 'bmp', 'png'];

// One validation function for all file types    
function isValidFileType(fName, fType) {
    return extensionLists[fType].indexOf(fName.split('.').pop()) > -1;
}

然后，submit代码中的if语句被替换为：

if (imageChosen && !isValidFileType(file.val(), 'image')) {
        return failValidation('Please select a valid image');
    }
else if (!imageChosen && !isValidFileType(file.val(), 'video')) {
        return failValidation('Please select a valid video file.');
    }        

每个文件类型都有一个“type”属性，例如：“image/jpeg”、“audio/mp3”等等

这是使用“匹配”方法（字符串）检查文件类型的一种方法的示例：

也可以用布尔方式编写：

function isImage(

  return !!file.type.match('image.*');

}

如前所述，文件具有type属性。
您可以将文件类型与支持的类型列表进行比较，如下所示：

///image 1 and video 2
//you can extend file types
var types= {
    'jpg' :"1",
    'avi' :"2",
    'png' :"1",
    "mov" : "2",
}

function checkeExtension(filename,submitId) {
    var re = /\..+$/;
    var ext = filename.match(re);
    var type = $("input[type='radio']:checked").val();
    var submitEl = document.getElementById(submitId);

    if (types[ext] == type) {
        submitEl.disabled = false;
        return true;
    } else {
        alert("Invalid file type, please select another file");
        submitEl.disabled = true;
        return false;
    }  
}

const validFileTypes = ['image/jpeg', 'image/jpg', 'image/png'];

const fileTypeValid = (file, fileTypes) => {     
    return fileTypes.some((fileType) => fileType === file.type);
}

// ... call fileTypeValid with the two parameters

我使用jQuery验证插件：很快就会有一个“accept”属性，它还没有得到真正的支持，但请看一看：通常唯一安全有效的方法是服务器端，但您可以使用javascript或jQuery的验证插件检查文件扩展名。用户可以轻松地将文件扩展名更改为“傻瓜”在这样的验证中，基于mimetype的解决方案会更好（尽管我不确定是否存在这样的问题，我自己仍在寻找），请参见getExtension可以是一行，方法是将其设置为“returnfilename.split（'.'）.pop（）；”，这样可以轻松地更改文件扩展名并通过this@Kakar对的这不是万无一失的。这个答案是在访问文件API以读取文件内容之前编写的（如果您必须支持旧浏览器，这仍然不是一个选项）。无论您使用什么JS解决方案，您仍然希望在服务器上验证它。没有客户端验证可以取代服务器端验证。您可以添加信息帮助原始海报了解在功能中挂接到哪里，以及在哪里定义它吗？谢谢，我认为这是最简单的方法。这对我来说是最好的。