So-net無料ブログ作成

フォームのファイル選択欄をボタン押下で表示する [JavaScript]

/* 本当は、参照(ブラウズ)ボタンでファイルを選択したら次のファイル選択欄を出したい */
/* とりあえず、Add More File ボタンを押したら表示することで我慢 */
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>test < /title>
<script language="JavaScript" type="text/javascript">

function appendFile(form_id, name) {
if (!document.createElement || !document.getElementById) return;

var childs = document.getElementById(form_id)
for (i = 0; i < childs.length; i++) {
var child = childs[i];
if (child.name == name && child.type == 'file' && child.value == '') {
return;
}
}

var br = document.createElement("br");
document.getElementById(form_id).appendChild(br);
var ele = document.createElement("input");
ele.setAttribute("type", "file");
ele.setAttribute("name", name);
document.getElementById(form_id).appendChild(ele);
}

< /script>

< /head>
<body>
<form id="sampleform" action="." method="post" encType="multipart/form-data" >
<input type="text" name="textvalue" /> <br />
<input type="submit" value="Submit Form" /> <br />
<input type="file" name="filedata" />
< /form>

<input type="button" value="Add More File" onclick="appendFile('sampleform', 'filedata');" />
< /body>
< /html>


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:パソコン・インターネット

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

トラックバック 0