Chromeでのファイルアップロード中に 'キャンセル'を押すと値が消去されます

Question

単純なhtml type = "file"入力で作業していますが、Chromeで問題が発生しています。具体的には、ファイルを参照して選択すると、値が保存されます。ただし、再度ブラウズしてキャンセルを押すと、値がクリアされます。

HTMLは単純です：ここでは

<input type="file"> 

はシンプルfiddle- http://jsfiddle.net/78ghn/です。

これは他のブラウザでは起こりません。強制的に値を保持する方法はありますか？

Answer 1

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を使用して送信する必要があります。それは最適ではありませんが、うまくいきます。