HTMLフォームのファイル入力の外観をカスタマイズする

Question

私は、HTMLフォームのファイル入力の外観をカスタマイズして、ボタンがサイトの他のボタンと一致するようにする方法を見つけようとしています。ここを見て、私は期待していた解決策を見つけましたが、それは奇妙な振る舞いをしています。

私は自分のファイルを入力してdisplay：noneを設定し、フォーム内に新しいテキスト入力とボタンを作成しました。

  <form method="post" action="../Entry/Create" enctype="multipart/form-data" onsubmit="return aentryValidate()"> 
       <input type="text" id="EntryTitle" name="EntryTitle" maxlength="50" /> 
       <div id="invalidTitle" class="invalidData"></div> 
       <p id="char-remaining">(50 characters remaining)</p> 

       <input type="file" id="ImageFile" name="ImageFile" style="display:none;" /> 
       <input type="text" id="ImageFileMask" name="ImageFileMask" disabled="true" /> 
       <button type="button" onclick="HandleFileButtonClick()" id="ImageFileButton" style="margin-left:10px;padding-bottom:0px;height:20px;width:100px;font-size:14px;">browse...</button> 
       <div id="invalidImage" class="invalidData"></div> 
       <p id="file-desc">(image to represent your entry, jpg, png, or gif)</p> 

       <textarea id="EntryDesc" name="EntryDesc"></textarea> 
       <div id="invalidDesc" class="invalidData"></div> 
       <br /> 

       <input type="checkbox" id="isPrivate" name="isPrivate" value="true" /> 
       <input type="hidden" name="isPrivate" value="false" /> 
       Make my entry private. 

       <button id="new-entry-save">save</button> 
      </form> 

その後ImageFileButtonボタンを処理するために、私のJavascriptをクリックさ：

function HandleFileButtonClick() { 
    document.getElementById("ImageFile").click(); 
    document.getElementById("ImageFileMask").value = document.getElementById("ImageFile").value; 
} 

正常に動作するように見えます。ボタンをクリックすると、ウィンドウがポップアップしてファイルを選択します。ファイルを選択すると、テキストボックスにファイルが表示されます。

フォーム上の保存ボタンを押すと奇妙な動作が発生します。何らかの理由で実際に送信するには、2回クリックする必要があることに気付きました。そして、それが提出するとき、それはもはやファイルを掲示していません。

私は何が起こっていたかを見るために再びファイル入力を見えるようにしました。 ImageFileButtonボタンを使用してファイルを選択すると、そのファイルがファイル入力に表示されます。しかし、保存をクリックすると、ファイル入力がクリアされ、フォームは送信されません。その後、もう一度クリックして提出する必要があります。もちろん、今はファイルがありません。

ここで何が起こっているのですか？

Answer 1

いいえ、できません。ファイル入力は一般的にブラウザに依存します。 uploadifyのように、JavaScriptの置き換えやFlash置換が必要な場合があります。

記事：それはスタイリングに来るとき、すべてのフォームフィールドのInput File

、ファイルアップロードフィールドは、はるかに最悪です。エクスプローラのWindowsでは、Mozillaのほうが若干少なく、他のブラウザはまったくありません。 「ブラウズ」ボタンは、特にCSS操作では完全にアクセスできません。