1

ボタンがサイトの残りのボタンと一致するように、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 ボタンを使用してファイルを選択すると、そのファイルがファイル入力に表示されます。しかし、保存をクリックすると、ファイル入力がクリアされ、フォームは送信されません。その後、もう一度クリックして送信する必要がありますが、もちろんファイルはありません。

ここで何が起こっているか知っている人はいますか？

4

1 に答える 1

1

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

記事:入力ファイル

すべてのフォーム フィールドの中で、ファイル アップロード フィールドはスタイリングに関しては最悪です。Explorer Windows はスタイルの可能性をいくらか提供しますが (多くはありません)、Mozilla はわずかに少なく、他のブラウザーにはまったくありません。特に「参照」ボタンは、CSS 操作から完全にアクセスできません。

于 2012-04-14T16:50:45.520 に答える