web-dev-qa-db-ja.com

フォーム送信時にファイルタイプを確認しますか？

次のフィールドを持つフォームがあり、

<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>

フォームを送信する前に検証したい。ここで、ユーザーがタイプを画像として選択してビデオをアップロードするか、タイプをビデオとして選択して画像をアップロードするかどうかを検証するにはどうすればよいですか？

Javascriptまたはjqueryでこれを実現できます。これを検証する簡単な方法はありますか？

これで私を親切に助けてください。

javascriptjqueryhtmlfile-upload
18
mymotherland

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
    });

});

iE8、RockMelt（Chromeベース）、Firefox 7でテスト済みのjsFiddleバージョン： http://jsfiddle.net/Ngrbj/4/

50
GregL

提供された答えは機能しますが、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;
}

次に、送信コード内の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.');
    }
5
Wayne F. Kaskie

Input：fileでfilesプロパティを使用すると、ファイルオブジェクトをループしてtypeプロパティをチェックできます

    $('#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>
2
Izabela Skibinska

すべてのファイルタイプには、「type」プロパティがあります。たとえば、「image/jpeg」、「audio/mp3」など...

これは、（文字列の） 'match'メソッドを使用してファイルのタイプをチェックする1つの方法の例です。

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';
}

ブール値の方法で記述することもできます。

function isImage(

  return !!file.type.match('image.*');

}
1
Moshe Estroti

これを試すことができます：

_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;
}
_

この関数はcheckcreateform()で使用できます

0
Yoram de Langen

まず、次のようにhtmlを変更する必要があります。

<input type="file" tabindex="5" class="text-size text" id="file" name="file" onchange="checkeExtension(this.value,"submit");">

次に、次のような関数が必要です。

///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;
    }  
}
0
erimerturk