Я и парень с работы работаем над веб-приложением для наших клиентов, чтобы войти в систему и управлять его деталями.Один из разделов просит пользователя загрузить туда логотип компании, но, как мы все знаем, кнопка html browes или тег, который также известен, является жестким файлом cookie для стиля.вот как я хочу, чтобы это выглядело:
Но реальность такова, что если я добавлю туда простой старый тег файла, он будет выглядеть мягким, общим и неуместным, так что я погуглил для решения и послеДля этого я наткнулся на этот код, который дал изображение под кодом (на котором я также показываю загрузку файла без установленной непрозрачности):
#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>
Это базовый хак, и когда я выбираю стилизованную кнопку, я действительно выбираю невидимую кнопку загрузки, тогда значение загрузки передается в тестовое поле выше, чтобы выглядеть как его настоящая часть загрузки.У этого метода есть две проблемы, и я надеюсь, что вы сможете мне помочь здесь:
a) Для загрузки можно нажать только кнопку.В большинстве браузеров (не включая Chrome) вы можете нажать на текстовое поле, а также кнопку для загрузки изображения.Конечно, с помощью этого метода текст пути к файлу добавляется в текстовое поле, но любое изменение этого поля не изменит файл, например: если вы выбрали file1.jpg для загрузки, но вы действительно хотели file2.jpg, измените путь к файлу в текстовом поленичего не изменит на фактический элемент загрузки
b) Некоторые браузеры, такие как Chrome и Opera, добавляют \ fakepath \ filepath в текстовое поле, и это просто уродливо, поэтому любой оператор if, который может это исключить, также будеточень полезно.
Надеюсь, что вы, ребята, можете помочь мне с этим, если не с помощью подсказок кода, то, если кто-нибудь знает хороший JavaScript-плагин, который спасает день.
Спасибо