javascriptでのアップロード制限について

質問

現在、アップローダーを作成中なのですが、アップロードファイルの拡張子がjpeg,png,gif,bmp以外ではsubmitを押してもalertで先には進めなくする機能を製作中ですが、<input type="file" name="aa[]">のように複数ある場合の値の取得方法が、上手くいかず困っております。
どなたかご存知の方、教えてください。
宜しくお願いいたします。

javascript----------------------------
<SCRIPT LANGUAGE="JavaScript">
extArray = new Array(".gif",".jpg",".jpeg",".png",".bmp");
function LimitAttach(form, file) {
allowSubmit = false;
if (!file) return;
while (file.indexOf("\\") != -1)
file = file.slice(file.indexOf("\\") + 1);
ext = file.slice(file.indexOf(".")).toLowerCase();
for (var i = 0; i < extArray.length; i++) {
if (extArray[i] == ext) { allowSubmit = true; break; }
}
if (allowSubmit) form.submit();
else
alert("アップロード出来る画像の拡張子は\n"
+ (extArray.join(" ")) + "になります");
}
// End -->
</script>

html-------------------------
<form method=post name=upform action="/cgi-bin/some-script.cgi" enctype="multipart/form-data">
<input type=file name="a" class="a">
<input type=button name="Submit" value="Submit" onClick="LimitAttach(this.form, this.form.a.value)">
</form>

回答No.2

yuu_x · ベストアンサー

<form method="POST" name="upform" id="upform" action="/cgi-bin/some-script.cgi" enctype="multipart/form-data" onsubmit="limitAttach( event );">
　<p>
　　<input type="file" name="aa[]" class="a" accept="image/gif,image/jpeg,image/png,image/bmp">
　　<input type="file" name="aa[]" class="a" accept="image/gif,image/jpeg,image/png,image/bmp">
<!-- cf.) http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/interact/forms.html#adef-accept -->
　　<input type="submit" name="Submit" value="Submit">
　</p>
</form>

<script type="text/javascript">
//@cc_on
function limitAttach( evt ) {
　var t = evt./*@if(1) srcElement @else@*/ target /*@end@*/;
　var form = t.nodeName == 'FORM' ? t : t.form;
　var eles = form.elements[ 'aa[]' ];
　var i, L = eles ? eles.length ? eles.length : 1 : 0;

　for( i = 0; i < L; i ++ ) {
　　if( /\.(?:jpg|jpeg|png|bmp)$/i.test( eles[ i ].value ) == false ) {
　　　alert( 'worning' );
　　　evt./*@if(1) returnValue = false; @else@*/ preventDefault( ); /*@end@*/
　　}
　}
}
</script>

回答No.1

fujillin

＞複数ある場合の値の取得方法が、上手くいかず困っております

nameで識別できるのかどうかご質問文からは不明ですが…
要は、form内の<input type="file">のものを順にループするようにすれば良いのでは？

function LimitAttach(form) {
var i, elm = form.elements;
for (i=0; i<elm.length; i++){
if (elm[i].nodeName=='INPUT' && elm[i].type=='file') alert(elm[i].value);
}
}

補足

回答の方ありがとうございます。
ちなみにループの処理は上記のタグにどう組み込めばいいのでしょうか？
知識不足ですいません。。。