Javascript/jqueryを使用してファイルアップロードフィールドを検証する方法

ユーザーがアップロードするファイルを選択した場合、どうすれば検証できますか？Javascript/jqueryを使用してファイルアップロードフィールドを検証する方法

編集：少なくともFirefoxでは

2009-05-07 Click Upvote

http://www.angulartutorial.net/2016/05/file-upload-validation.html – Prashobh

それはvalueプロパティのチェック：

jQueryのでは（あなたのタグがそれを言及するので）：

$('#fileInput').val()

それともバニラJavaScriptで：

document.getElementById('myFileInput').value

出典

2009-05-07 08:01:32 Sietse

をぶつけ、DOMインスペクタは、ファイルの入力要素がfilesというプロパティを持っていることを私に語っています。あなたはその長さを確認することができるはずです。

document.getElementById('myFileInput').files.length

出典

2009-05-07 05:33:38 nickf

はクロームでは動作しませんので、おそらくどちらかのIEでの作業を習慣 –

それはHTML5です：のhttp：// stackoverflowの.com/questions/7684011 /複数のファイルをアップロードするフィールドから取得する – ANeves

私はいくつかからこれを得ましたフォーラム。それがあなたに役立つことを願っています。

<script type="text/javascript"> 
function validateFileExtension(fld) { 
    if(!/(\.bmp|\.gif|\.jpg|\.jpeg)$/i.test(fld.value)) { 
     alert("Invalid image file type.");  
     fld.form.reset(); 
     fld.focus();   
     return false; 
    } 
    return true; 
} </script> </head> 
<body> <form ...etc... onsubmit="return 
validateFileExtension(this.fileField)"> <p> <input type="file" 
name="fileField" onchange="return validateFileExtension(this)"> 
<input type="submit" value="Submit"> </p> </form> </body>

出典

2012-01-09 04:25:37 Chaitu

ようこそ。別のソースからコードを取得した場合は、適切に属性を付けるか、または著作権に違反する可能性があるため、そのコードにリンクする必要があります。 – Scott

私の機能は、ユーザーがファイルを選択したかどうかをチェックし、そのファイル拡張子を許可するかどうかをチェックすることもできます。

これを試してみてください：

は

 
<input type="file" name="fileUpload" onchange="validate_fileupload(this.value);"> 

function validate_fileupload(fileName) 
{ 
    var allowed_extensions = new Array("jpg","png","gif"); 
    var file_extension = fileName.split('.').pop().toLowerCase(); // split function will split the filename by dot(.), and pop function will pop the last element from the array which will give you the extension as well. If there will be no extension then it will return the filename. 

    for(var i = 0; i <= allowed_extensions.length; i++) 
    { 
     if(allowed_extensions[i]==file_extension) 
     { 
      return true; // valid file extension 
     } 
    } 

    return false; 
}

出典

2013-01-08 10:22:46

forループは、i KevInSol

ビルRavindersソリューションに、このコードは、フォームが送信されて停止します。サーバ側でも拡張機能をチェックするのが賢明かもしれません。だから、ハッカーには何もアップロードしないでください。

<script> 
var valid = false; 

function validate_fileupload(input_element) 
{ 
    var el = document.getElementById("feedback"); 
    var fileName = input_element.value; 
    var allowed_extensions = new Array("jpg","png","gif"); 
    var file_extension = fileName.split('.').pop(); 
    for(var i = 0; i < allowed_extensions.length; i++) 
    { 
     if(allowed_extensions[i]==file_extension) 
     { 
      valid = true; // valid file extension 
      el.innerHTML = ""; 
      return; 
     } 
    } 
    el.innerHTML="Invalid file"; 
    valid = false; 
} 

function valid_form() 
{ 
    return valid; 
} 
</script> 

<div id="feedback" style="color: red;"></div> 
<form method="post" action="/image" enctype="multipart/form-data"> 
    <input type="file" name="fileName" accept=".jpg,.png,.bmp" onchange="validate_fileupload(this);"/> 
    <input id="uploadsubmit" type="submit" value="UPLOAD IMAGE" onclick="return valid_form();"/> 
</form>

出典

2017-07-27 10:16:59

Javascript/jqueryを使用してファイルアップロードフィールドを検証する方法

答えて

関連する問題