function f()
{
document.getElementById("b").appendChild(document.getElementById("a"));
document.getElementById("d").innerHTML = document.getElementById("c").innerHTML
document.getElementById("alert").innerHTML = 'Your last file was '.concat(document.getElementById("b").lastChild.value.slice(12))
}
function g()
{
if(document.getElementById("b").lastChild.value)
{
\t document.write("You have submitted ".concat(document.getElementById("b").lastChild.value.slice(12)));
}
else
{
\t document.write("You have submitted nothing.");
}
}
#a
{
opacity: 0;
width: 100%;
height: 100%;
}
#c
{
display: none;
}
#d
{
width: 100%;
height: 100%;
}
#e
{
background-color: green;
border: 2px solid black;
color: white;
font-size: 16pt;
width: 180px;
height: 90px;
}
#f
{
position: relative;
left: 25%;
bottom: 70%;
}
<form>
<div id='e'>
<span id='d'>
<input type="file" onchange='f();' id='a'>
</span>
<span id='f'>Select File</span>
</div>
<input type='button' value='Submit' onclick='g();'>
</form>
<span id='alert'>You have chosen no files.</span>
<ul id='b'>
</ul>
<form id='c'>
<input type="file" onchange='f();' id='a'>
</form>
私は、このためのネイティブ実装を見つけることができませんでしたので、私は自分の回避策を試してみました。カスタムCSSボタンのオーバーレイから入力を受け取り、実際のinput
要素をリストに追加し、それを空の要素に置き換えます。値は通常のinput
であるため、読み取られて表示されます。含まれていませんが、元のinput
(ul
の最後の要素はid='b'
)をform
に移動し、JavaScriptを使用して送信する必要があります。それは最適ではありませんが、うまくいきます。
Chromiumでこの問題を発見しました:http://code.google.com/p/chromium/issues/detail?id=2508 これは以前からログに記録されていましたが、意図された行動かどうか。 –
ほぼ3年後、まだ解決されていないようです。 – skwidbreth