我正在将图像上传到servlet。通过检查文件头中的幻数,仅在服务器端验证上传的文件是否为图像。在将表单提交给Servlet之前,有什么方法可以在客户端验证扩展?我一按回车就开始上传。
我在客户端使用Javascript和jQuery。
更新: 我最终通过服务器端验证结束了工作,该验证读取字节,如果不是图像,则拒绝上传。
可以仅检查文件扩展名,但是用户可以轻松地将virus.exe重命名为virus.jpg并“通过”验证。
值得一试的是,以下代码检查文件扩展名,如果不符合有效扩展名之一,则中止该代码:(选择无效文件,然后尝试提交以查看运行中的警报)
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) {及其关联的右括号。该代码将验证表单中的任何文件输入,无论其名称如何。
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 />
如果文件扩展名无效,它将显示警报并重置输入。