我正在将图像上传到 servlet。通过检查文件头中的幻数来验证上传的文件是否为图像仅在服务器端完成。在将表单提交给 servlet 之前，有什么方法可以验证客户端的扩展吗？我一回车就开始上传。
我在客户端使用 Javascript 和 jQuery。
更新： 我终于结束了服务器端验证，它读取字节并拒绝上传，如果它不是图像。
上传文件前验证文件扩展名
IT技术
javascript
jquery
validation
file-upload
2021-02-02 05:20:44
6个回答
可以只检查文件扩展名，但用户可以轻松地将virus.exe 重命名为virus.jpg 并“通过”验证。
对于它的value，这里是检查文件扩展名并在不符合有效扩展名之一时中止的代码：（选择无效文件并尝试提交以查看警报）
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}<form onsubmit="return Validate(this);">
File: <input type="file" name="my file" /><br />
<input type="submit" value="Submit" />
</form>请注意，该代码将允许用户在不选择文件的情况下发送...如果需要，请删除该行if (sFileName.length > 0) {及其关联的右括号。该代码将验证表单中的任何文件输入，无论其名称如何。
这可以在更少的行中使用 jQuery 完成，但我对“原始”JavaScript 足够满意，最终结果是相同的。
如果您有更多文件，或者想要在更改文件时触发检查，而不仅仅是在表单提交中，请改用此类代码：
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />如果文件扩展名无效，这将显示警报并重置输入。
对于请求的简单性而言，现有的答案似乎都不够紧凑。检查给定的文件输入字段是否具有一组扩展名可以按如下方式完成：
function hasExtension(inputID, exts) {
var fileName = document.getElementById(inputID).value;
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}
因此，例如使用可能（这里upload是id一个文件输入的）：
if (!hasExtension('upload', ['.jpg', '.gif', '.png'])) {
// ... block upload
}
或者作为一个 jQuery 插件：
$.fn.hasExtension = function(exts) {
return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}
用法示例：
if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
// ... block upload
}
将.replace(/\./g, '\\.')有逃脱的正则表达式的点，使基础扩展可以在没有匹配任何字符的点进行传递。
没有对这些进行错误检查以保持它们的简短，大概如果您使用它们，您将确保输入首先存在并且扩展数组有效！
$(function () {
$('input[type=file]').change(function () {
var val = $(this).val().toLowerCase(),
regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");
if (!(regex.test(val))) {
$(this).val('');
alert('Please select correct file format');
}
});
});
我来这里是因为我确信这里的答案都不是很......诗意的：
function checkextension() {
var file = document.querySelector("#fUpload");
if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}<input type="file" id="fUpload" onchange="checkextension()"/>检查是否选择了文件
if (document.myform.elements["filefield"].value == "")
{
alert("You forgot to attach file!");
document.myform.elements["filefield"].focus();
return false;
}
检查文件扩展名
var res_field = document.myform.elements["filefield"].value;
var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
if (res_field.length > 0)
{
if (allowedExtensions.indexOf(extension) === -1)
{
alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
return false;
}
}
其它你可能感兴趣的问题