2

http://jsfiddle.net/ZhmUw/

Пытался сделать через position: absolute, чтобы при клике на ссылку, кликалось и по type="file", но ничего не вышло. Если делать это на js:

document.getElementById('file').click;

то в некоторых браузерах не работает, поэтому такой вариант не катит.

4 ответа 4

5

Стандартный способ - решать через label

label.uploadbutton input {
  display: none;
}

label.uploadbutton .button {
  width: 100px;
  height: 20px;
  background: yellow;
  border: 1px  solid black;
  cursor: pointer;
}

label.uploadbutton .button:active {
  background: green;
}
<label class="uploadbutton">
  <div class="button">Upload</div>
  <input type="file"/>
</label>

6
  • Это не кросс браузерно, например Opera 12.15 не понимает этого. P.S. Хотя, через opacity уже начинает работать.
    – RubaXa
    8 авг 2013 в 17:50
  • по идее должно всегда работать с триггером click, но надо это делать в том же потоке (или как там) что и хэндлер клика, в последний раз у меня от IE6 это работало.
    – zb'
    8 авг 2013 в 17:56
  • 1
    вот для оперы, jsfiddle.net/oceog/tP8d9/4
    – zb'
    8 авг 2013 в 18:01
  • Вообще способ клевый и почему то встречаю его первый раз, спасибо.
    – RubaXa
    8 авг 2013 в 18:03
  • @RubaXa это кстати странно, label он ведь для того и придуман...
    – zb'
    8 авг 2013 в 18:44
2

Я делаю так (или button)

.upload-link {
  color: #36c;
  display: inline-block;
  *zoom: 1;
  *display: inline;
  overflow: hidden;
  position: relative;
  padding-bottom: 2px;
  text-decoration: none;
}

.upload-link__txt {
  z-index: 1;
  position: relative;
  border-bottom: 1px dotted #36c;
}

.upload-link:hover .upload-link__txt {
  color: #f00;
  border-bottom-color: #f00;
}

.upload-link__inp {
  top: -10px;
  right: -40px;
  z-index: 2;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
  font-size: 50px;
}
<a class="upload-link js-fileapi-wrapper">
  <span class="upload-link__txt">Upload photo</span>
  <input class="upload-link__inp" name="photo" type="file" accept=".jpg,.jpeg,.gif" />
</a>

0

Пытался сделать через position: absolute, чтобы при клике на ссылку, кликалось и по type="file", но ничего не вышло. Если делать это на js:

document.getElementById('file').click;

то в некоторых браузерах не работает, поэтому такой вариант не катит.

Ну конечно такой способ не сработает. Данный код возвращает функцию, а не вызывает. А для вызова:

document.getElementById('file').click();
0

<label for="upload_img">Upload</label>
<form style="display:none;" enctype="multipart/form-data">
  <input type="file" id="upload_img" name="photo">
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.