Стилизация с помощью CSS и функциональность кнопки загрузки - PullRequest
4 голосов
/ 10 декабря 2010

Я и парень с работы работаем над веб-приложением для наших клиентов, чтобы войти в систему и управлять его деталями.Один из разделов просит пользователя загрузить туда логотип компании, но, как мы все знаем, кнопка html browes или тег, который также известен, является жестким файлом cookie для стиля.вот как я хочу, чтобы это выглядело: alt text

Но реальность такова, что если я добавлю туда простой старый тег файла, он будет выглядеть мягким, общим и неуместным, так что я погуглил для решения и послеДля этого я наткнулся на этот код, который дал изображение под кодом (на котором я также показываю загрузку файла без установленной непрозрачности):

#divinputfile
{
height:85px;
width:250px;
margin:0px;
background-image: url(images/upload_file.gif);
background-repeat: no-repeat;
background-position: right bottom;
}

#divinputfile #filepc
{
opacity: 0.0;
-moz-opacity: 0.0;
filter: alpha(opacity=00);
font-size:16px;
cursor: pointer;
}

#filepc
{
margin-top: 12px;
}

#fakeinputfile
{
margin-top:-28px;
}

#fakeinputfile #fakefilepc
{
width:250px;
height:22px;
font-size:18px;
font-family:Arial;
}

<body>
<br />
<div id="divinputfile"> 
  <div id="fakeinputfile">
    <br />
        <input name="fakefilepc" type="text" id="fakefilepc" />
  </div>
    <div align="right">
    <input name="filepc" type="file" size="1" id="filepc"    onchange="document.getElementById('fakefilepc').value = this.value;"/>
    </div>
</div>
</body>

alt text

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

a) Для загрузки можно нажать только кнопку.В большинстве браузеров (не включая Chrome) вы можете нажать на текстовое поле, а также кнопку для загрузки изображения.Конечно, с помощью этого метода текст пути к файлу добавляется в текстовое поле, но любое изменение этого поля не изменит файл, например: если вы выбрали file1.jpg для загрузки, но вы действительно хотели file2.jpg, измените путь к файлу в текстовом поленичего не изменит на фактический элемент загрузки

b) Некоторые браузеры, такие как Chrome и Opera, добавляют \ fakepath \ filepath в текстовое поле, и это просто уродливо, поэтому любой оператор if, который может это исключить, также будеточень полезно.

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

Спасибо

Ответы [ 5 ]

1 голос
/ 25 декабря 2010

Кроссбраузерно сложно и еще сложнее сделать. Webkit (safari / chrome) имеет совсем другой способ обработки этого, чем IE и Mozilla. Как показано, вы в конечном итоге прибегнете к куче хаков, которые вам постоянно нужно будет проверять для каждого браузера по мере их выпуска.

Один из способов, который я нашел, - постепенно улучшать использование плагина для флеш-памяти. Вам нужно только проверить наличие вспышки и блокировку вспышки, не блокирующую элемент.

Например: http://www.uploadify.com/demos/ (хотя, похоже, это не проверяет наличие флэшблока!)

1 голос
/ 25 декабря 2010

Полагаю, вам может помочь следующая ссылка: "Ajax Upload; скрипт загрузки файла с индикатором выполнения, перетаскиванием и перетаскиванием" . Не совсем ajax, просто умное использование iframe. Надеюсь, поможет. Код хорошо!

1 голос
/ 22 декабря 2010

Вопрос а: Нет запуска события клика. Безопасность и все такое. Вы можете добавить вторую невидимую кнопку загрузки, как и первую. Если одно изменится, уберите другое. И хаки накапливаются ...

Вопрос б: Смотри ответ Киссаки. Вам понадобится JS, чтобы очистить это 2-е невидимое поле ...

1 голос
/ 22 декабря 2010

Вот решение.

  1. Вопрос A решается путем создания <input type="file" /> полного размера вашего виджета и использования делений для создания областей, не реагирующих на нажатия.
  2. Вопрос B решается с помощью трюка, который я нашел здесь

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style the File Upload Input - Example</title>
<style type="text/css">
#file-upload {
    position:relative;
    top:0px;
    left:0px;
    width:250px;
    height:65px;
    overflow:hidden;
    padding-top:15px;
    background-image: url(images/upload_file.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}
#file-upload input[type='file'] {
    width:250px;
    height:65px;
    font-size:65px;
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute;
    top:15px;
    left:0px;
    z-index:9;
}
#file-upload input {
    width:97%;
}
#file-upload #no-click {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:10;
    width:125px;
    height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
    <input size="0" name="filepc" type="file" id="filepc" onchange="var clone = this.cloneNode(true);clone.type='text';document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;" />
    <div id="fake-file-upload">
         <input name="fakefilepc" type="text" id="fakefilepc" />
         <div id="no-click"></div>
    </div>
</div>
</body>

Возможно, вы захотите беспокоиться о постепенном ухудшении ... то же самое с HTML, CSSи JavaScript более четко разделен, что должно привести к чистому ухудшению.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Style the File Upload Input - Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("body").addClass("js");
        $("#file-upload").append("<div id=\"fake-file-upload\">" +
                        "<input name=\"fakefilepc\" type=\"text\" id=\"fakefilepc\" />" +
                        "<div id=\"no-click\"></div>" +
                    "</div>");
        $("#file-upload input[type='file']").change(function() {
            var clone = this.cloneNode(true);
            clone.type='text';
            document.getElementById('fakefilepc').value = clone.value?clone.value:this.value;
        });
    });
</script>
<style type="text/css">
#file-upload {
    position:relative;
    top:0px;
    left:0px;
    width:250px;
    height:65px;
}
body.js #file-upload {
    overflow:hidden;
    padding-top:15px;
    background-image: url(images/upload_file.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}
body.js #file-upload input[type='file'] {
    width:250px;
    height:65px;
    font-size:65px;
    opacity:0;
    filter:alpha(opacity=0);
    position:absolute;
    top:15px;
    left:0px;
    z-index:9;
}
body.js #file-upload input {
    width:97%;
}
body.js #file-upload #no-click {
    position:absolute;
    bottom:0px;
    left:0px;
    z-index:10;
    width:125px;
    height:40px;
}
</style>
</head>
<body>
<div id="file-upload">
    <input size="0" name="filepc" type="file" id="filepc" />
</div>
</body>

Я использовал следующее изображение как изображение images/upload_file.gif (и его соответствующие размеры для всего, что с ним связано)

alt text

1 голос
/ 10 декабря 2010

У вас уже есть JavaScript для текстового поля для отображения нового значения пути к файлу при изменении. Здесь вам также нужно будет удалить любые / поддельные пути / части и т. Д.

Вы также можете добавить событие щелчка в текстовое поле, которое активирует событие щелчка при просмотре файла.

Я могу сразу сказать вам, что это довольно просто с jQuery, но я не знаю, как можно было бы сделать это с простым JS.

/ е: На самом деле, кажется, что действия по вводу файла не могут быть инициированы. См. Связанный вопрос В JavaScript можно ли программно вызвать событие "click" для элемента ввода файла?

...