Javascript 表单提交时检查文件类型？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7977084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check file type when form submit?
提问by mymotherland
I have the form having the follwing fields,
我的表格有以下字段，
<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>
I want to validate before form submit. Here how can i validate if user select type as Image and upload video or select type as video and upload image ?
我想在提交表单之前进行验证。这里我如何验证用户是选择类型为图像并上传视频还是选择类型为视频并上传图像？
We can achieve this by javascript or jquery.Any quick way to validate this ?
我们可以通过 javascript 或 jquery.Any 快速方法来验证这一点？
Kindly help me on this.
请帮我解决这个问题。
回答by GregL
Instead of using onsubmit, use jQuery's submit handler, and validate using some javascript like the following:
不要使用onsubmit，而是使用 jQuery 的提交处理程序，并使用一些 javascript 进行验证，如下所示：
function getExtension(filename) {
var parts = filename.split('.');
return parts[parts.length - 1];
}
function isImage(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'jpg':
case 'gif':
case 'bmp':
case 'png':
//etc
return true;
}
return false;
}
function isVideo(filename) {
var ext = getExtension(filename);
switch (ext.toLowerCase()) {
case 'm4v':
case 'avi':
case 'mpg':
case 'mp4':
// etc
return true;
}
return false;
}
$(function() {
$('form').submit(function() {
function failValidation(msg) {
alert(msg); // just an alert for now but you can spice this up later
return false;
}
var file = $('#file');
var imageChosen = $('#type-1').is(':checked');
if (imageChosen && !isImage(file.val())) {
return failValidation('Please select a valid image');
} else if (!imageChosen && !isVideo(file.val())) {
return failValidation('Please select a valid video file.');
}
// success at this point
// indicate success with alert for now
alert('Valid file! Here is where you would return true to allow the form to submit normally.');
return false; // prevent form submitting anyway - remove this in your environment
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form 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>
<label for="type-2">
<input type="radio" value="2" id="type-2" name="type">Video
</label> <br />
<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">
<br/>
<input type="submit" value="Create" id="submit" name="submit">
</form>tested in IE8, RockMelt (based on Chrome) and Firefox 7: http://jsfiddle.net/Ngrbj/4/
在 IE8、RockMelt（基于 Chrome）和 Firefox 7 中测试：http: //jsfiddle.net/Ngrbj/4/
回答by Wayne F. Kaskie
The answer provided works, but something that will run a little faster with a lot fewer lines for the validation code, using javascript array functions:
提供的答案有效，但使用 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;
}
Then, the if statement in the submit code is just swapped with:
然后，将提交代码中的 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.');
}
回答by Izabela Skibinska
Using files property on input:file you can loop through file objects and check type property
在 input:file 上使用 files 属性，您可以遍历文件对象并检查类型属性
$('#upload').on("change", function(){
var sel_files = document.getElementById('upload').files;
var len = sel_files.length;
for (var i = 0; i < len; i++) {
var file = sel_files[i];
if (!(file.type==='application/pdf')) {
continue;
}
}
}); <div class="modal">
<form id="form-upload">
<input type="file" name="upload" id="upload" multiple>
<br/>
</form>
</div>回答by Moshe Estroti
Every File type has a 'type' property, for example: 'image/jpeg', 'audio/mp3' and so on...
每个文件类型都有一个“type”属性，例如：“image/jpeg”、“audio/mp3”等等...
This is an example for one way to check the type of the file by using the 'match' method (of strings):
这是使用“匹配”方法（字符串）检查文件类型的一种方法的示例：
function getFileType(file) {
if(file.type.match('image.*'))
return 'image';
if(file.type.match('video.*'))
return 'video';
if(file.type.match('audio.*'))
return 'audio';
// etc...
return 'other';
}
You can also write it the boolean way:
你也可以用布尔方式来写：
function isImage(
return !!file.type.match('image.*');
}
回答by Yoram de Langen
you can try this:
你可以试试这个：
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;
}
You can use this function in your checkcreateform()
您可以在您的 checkcreateform()
回答by erimerturk
First you should change your html like this:
首先你应该像这样改变你的html：
<input type="file" tabindex="5" class="text-size text" id="file" name="file" onchange="checkeExtension(this.value,"submit");">
Then, you need a function like this:
然后，你需要一个这样的函数：
///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;
}
}
