11
ユーザーがアップロードするファイルを選択した場合、どうすれば検証できますか？Javascript/jqueryを使用してファイルアップロードフィールドを検証する方法
編集：少なくともFirefoxでは
A
答えて
17
それはvalueプロパティのチェック：
jQueryのでは（あなたのタグがそれを言及するので）：
$('#fileInput').val()
それともバニラJavaScriptで：
document.getElementById('myFileInput').value
0
をぶつけ、DOMインスペクタは、ファイルの入力要素がfilesというプロパティを持っていることを私に語っています。あなたはその長さを確認することができるはずです。
document.getElementById('myFileInput').files.length
+0
はクロームでは動作しませんので、おそらくどちらかのIEでの作業を習慣 –
+0
それはHTML5です：のhttp：// stackoverflowの.com/questions/7684011 /複数のファイルをアップロードするフィールドから取得する – ANeves
0
私はいくつかからこれを得ましたフォーラム。それがあなたに役立つことを願っています。
<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>
+5
ようこそ。別のソースからコードを取得した場合は、適切に属性を付けるか、または著作権に違反する可能性があるため、そのコードにリンクする必要があります。 – Scott
13
私の機能は、ユーザーがファイルを選択したかどうかをチェックし、そのファイル拡張子を許可するかどうかをチェックすることもできます。
これを試してみてください：
は
<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;
}
+1
forループは、i
1
ビル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>
http://www.angulartutorial.net/2016/05/file-upload-validation.html – Prashobh