Asp.net C # контроль загрузки

Question

Я создал элемент управления загрузкой изображений, однако меня не устраивает его внешний вид. Я только хочу, чтобы отображалась кнопка, а не текстовое поле слева от кнопки. Есть ли способ, которым я могу просто использовать обычный кнопочный элемент управления или элемент управления кнопкой ссылки, чтобы открыть диалоговое окно файла.

Answer 1

Браузеры чрезвычайно ограничены в управлении стилем входных данных для загрузки, чтобы попытаться смягчить ущерб, который может быть причинен обманом пользователей.

При этом вы можете делать то же, что и вы, но такженеобходимо учитывать, что каждый браузер размещает кнопку загрузки в отдельном месте, и вы будете эффективно взламывать стиль, размещая скрытые элементы здесь или там, и внешний вид / функциональность могут быть не одинаковыми во всех браузерах.

Эта статья содержит некоторую информацию, которую вы ищете.

Answer 2

Я получил этот простой пример, работающий в Firefox 4, IE6 и IE9, но, к сожалению, он не работает в Chrome 10.

<script type="text/javascript">
    $(document).ready(function () {
        var cnt = 1; // for interfering id's
        $('#upload').click(function () {

            // adds a new file-browser upload control and calls the AppendFilesToList with file information
            $("#files").append("<input type=\"file\" id=\"fileupload" + cnt + "\" onchange=\"javascript:AppendFilesToList(this.value);\" style=\"display:none;\" />");
            document.getElementById("fileupload" + cnt).click(); // calls the browsers file-upload dialog

            cnt++;
        });
    });
    // appends file information to a div
    function AppendFilesToList(evt) { $("#listfiles").append(evt + "<br/>"); }
</script>

<div id="files"></div>
<div id="listfiles"></div>

<br />

<input type="button" id="upload" value="Select files" />

Вы можете, однако, проверить этот пост о стилях:http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom и http://www.quirksmode.org/dom/inputfile.html

Answer 3

Способ визуализации <input type="file" /> зависит от используемого вами браузера. Прочтите этот пост , в котором говорится о том, как сделать его единообразным, но скрыть фактический рендеринг и иметь свой собственный.