使用 Javascript 进行文件类型验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8231058/
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
File type validation with Javascript
提问by Zain
I have a question regarding to JavaScript validation. I am validaing the <input type="file">whenever my scripts runs, it validates but also the action page is called. I want to stop the action page until the validation is complete. Here is my code, any help will be awesome. Regards
我有一个关于 JavaScript 验证的问题。我validaing了<input type="file">，每当我的脚本运行时，它验证也是操作页面被调用。我想停止操作页面，直到验证完成。这是我的代码，任何帮助都会很棒。问候
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Image Uploading</title>
</head>
<body>
<form name="xx" action="server.php" method="post" enctype="multipart/form-data" onsubmit="Checkfiles(this)">
<input type="file" name="file_uploading" id="filename">
<input type="submit" value="Submit" name="uploadfile">
</form>
<form name="view" method="post">
<a href="view_server.php">View your uploaded Images</a>
</form>
</body>
</html>
<script type="text/javascript">
function Checkfiles()
{
var fup = document.getElementById('filename');
var fileName = fup.value;
var ext = fileName.substring(fileName.lastIndexOf('.') + 1);
if(ext =="GIF" || ext=="gif")
{
return true;
}
else
{
alert("Upload Gif Images only");
return false;
}
}
</script>
回答by MOHW
var fname = "the file name here.ext";
var re = /(\.jpg|\.jpeg|\.bmp|\.gif|\.png)$/i;
if(!re.exec(fname))
{
alert("File extension not supported!");
}
回答by J. K.
The return value of the submit handler affects the submission.
提交处理程序的返回值影响提交。
onsubmit="return Checkfiles();"
This is basically saying:
这基本上是说：
form.onsubmit = function () { return Checkfiles(); };
回答by Bakudan
You can use the File Apito test for magic number. Maybe take a look at this answerfor other ideas about the validation. More reliable than the file extension check.
回答by Ankit verma
File Extension Validation through javascript
通过 javascript 验证文件扩展名
function ValidateExtension() {
var allowedFiles = [".doc", ".docx", ".pdf"];
var fileUpload = document.getElementById("fileUpload");
var lblError = document.getElementById("lblError");
var regex = new RegExp("([a-zA-Z0-9\s_\.\-:])+(" + allowedFiles.join('|') + ")$");
if (!regex.test(fileUpload.value.toLowerCase())) {
lblError.innerHTML = "Please upload files having extensions: <b>" + allowedFiles.join(', ') + "</b> only.";
return false;
}
lblError.innerHTML = "";
return true;
}
onclick event of submit button call this javascript function.
提交按钮的 onclick 事件调用这个 javascript 函数。
With the help of ID = lblError , print the error message in html section.
在 ID = lblError 的帮助下，在 html 部分打印错误消息。
回答by Rajnesh Thakur
Upload bulk data through excel sheet(.csv)
通过excel表格（.csv）上传批量数据
$("form").submit(function(){
var val = $(this).val().toLowerCase();
var regex = new RegExp("(.*?)\.(csv)$");
if(!(regex.test(val))) {
$(this).val('');
alert('Only csv file can be uploaded');
return false;
}
});回答by SLaks
You need to returnCheckFiles()
你需要返回CheckFiles()
回答by Ravshanbek Ahmedov
var _URL = window.URL || window.webkitURL;
$("input[type=file]").change(function(e) {
var file;
if ((file = this.files[0])) {
var img = new Image();
img.onload = function () {
// do to on load
};
img.onerror = function () {
alert("valid format " + file.type);
};
img.src = _URL.createObjectURL(file);
}
});
