ファイルをアップロードする前のファイル拡張子の検証
画像をサーブレットにアップロードしています。アップロードされたファイルがイメージであるかどうかの検証は、ファイルヘッダーのマジックナンバーをチェックすることにより、サーバー側でのみ行われます。フォームをサーブレットに送信する前に、クライアント側で拡張機能を検証する方法はありますか？ Enterキーを押すとすぐにアップロードが開始されます。
クライアント側で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) {行を削除し、関連する閉じ括弧を削除します。コードは、名前に関係なく、フォーム内のすべてのファイル入力を検証します。
これは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;
}
}
この例が好きです：
<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />
<script language="javascript" type="text/javascript">
function ValidateFileUpload(Source, args) {
var fuData = document.getElementById('<%= fpImages.ClientID %>');
var FileUploadPath = fuData.value;
if (FileUploadPath == '') {
// There is no file selected
args.IsValid = false;
}
else {
var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
args.IsValid = true; // Valid file type
FileUploadPath == '';
}
else {
args.IsValid = false; // Not valid file type
}
}
}
</script>
入力フィールドでリモートURLをテストする必要がある場合は、関心のあるタイプで単純な正規表現をテストしてみてください。
$input_field = $('.js-input-field-class');
if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
$('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
return false;
}
これは、.gif、.jpg、.jpeg、.tiff、または.pngのすべてをキャプチャしますending
Twitterのような人気のあるサイトでは、画像の末尾にサイズ属性が追加されていることに注意してください。たとえば、次の例は、有効な画像タイプであっても、このテストに失敗します。
https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large
そのため、これは完璧なソリューションではありません。しかし、それは道の約90％に到達します。
これを試してください（私のために働く）
function validate(){
var file= form.file.value;
var reg = /(.*?)\.(jpg|bmp|jpeg|png)$/;
if(!file.match(reg))
{
alert("Invalid File");
return false;
}
}<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>
入力type = "file"を使用して、アップロードファイルを選択しますか？もしそうなら、なぜaccept属性を使用しないのですか？
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />
[TypeScript]
uploadFileAcceptFormats: string[] = ['image/jpeg', 'image/gif', 'image/png', 'image/svg+xml'];
// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
return val === uploadedFileType;
});
JQueryを使用すると仮定した場合の再利用可能な方法を次に示します
ライブラリ関数（jQueryは不要）：
function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
if (required == false && stringToCheck.length == 0) { return true; }
for (var i = 0; i < acceptableExtensionsArray.length; i++) {
if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
}
return false;
}
String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }
String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }
ページ関数（jQueryが必要です（ほとんど））：
$("[id*='btnSaveForm']").click(function () {
if (!stringEndsWithValidExtension($("[id*='fileUploader']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
alert("Photo only allows file types of PNG, JPG and BMP.");
return false;
}
return true;
});
入力ファイルタイプに使用できるaccept属性を使用できます。 MDNドキュメントのチェックアウト
必要なファイルタイプを含む配列を作成し、jQueryで$ .inArray（）を使用して、ファイルタイプが配列に存在するかどうかを確認できます。
var imageType = ['jpeg', 'jpg', 'png', 'gif', 'bmp'];
// Given that file is a file object and file.type is string
// like "image/jpeg", "image/png", or "image/gif" and so on...
if (-1 == $.inArray(file.type.split('/')[1], imageType)) {
console.log('Not an image type');
}
参照ボタンとファイル拡張子を検証するには、次のコードを使用します。
function fileValidate(){
var docVal=document.forms[0].fileUploaded.value;
var extension = docVal.substring(docVal.lastIndexOf(".")+1,docVal.length);
if(extension.toLowerCase() != 'pdf')
alert("Please enter file in .pdf extension ");
enableAll();
return false;
}
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 /><script type="text/javascript">
function file_upload() {
var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
if (imgpath == "") {
alert("Upload your Photo...");
document.file.Word.focus();
return false;
}
else {
// code to get File Extension..
var arr1 = new Array;
arr1 = imgpath.split("\\");
var len = arr1.length;
var img1 = arr1[len - 1];
var filext = img1.substring(img1.lastIndexOf(".") + 1);
// Checking Extension
if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
alert("Successfully Uploaded...")
return false;
}
else {
alert("Upload Photo with Extension ' bmp , gif, png , jpg , jpeg '");
document.form.Word.focus();
return false;
}
}
}
function Doc_upload() {
var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
if (imgpath == "") {
alert("Upload Agreement...");
document.file.Word.focus();
return false;
}
else {
// code to get File Extension..
var arr1 = new Array;
arr1 = imgpath.split("\\");
var len = arr1.length;
var img1 = arr1[len - 1];
var filext = img1.substring(img1.lastIndexOf(".") + 1);
// Checking Extension
if (filext == "txt" || filext == "pdf" || filext == "doc") {
alert("Successfully Uploaded...")
return false;
}
else {
alert("Upload File with Extension ' txt , pdf , doc '");
document.form.Word.focus();
return false;
}
}
}
</script>