Настроить кнопку для загрузки изображения

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

<input type="file" />,this is rendering a choose button with a text saying `no files choosen` in the same line.

Можно ли настроить текст "no files choosen" ниже кнопки choose. Могу ли я сохранить изображение камеры перед текстом no files choosen.

Как это сделать для улучшения моего сайта.

Спасибо

Ответы

Ответ 1

Вы можете скрыть ввод, поместив его в div, который равен height:0px и overwflow:hidden. Затем вы добавляете кнопку или другой элемент html, который вы можете стилизовать по своему желанию. В событии onclick вы получаете поле ввода с помощью javascript или jQuery и нажимаете на него:

<div style="height:0px;overflow:hidden">
   <input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>

<script>
   function chooseFile() {
      $("#fileInput").click();
   }
</script>

Теперь ввод скрыт, но вы можете пометить кнопку так, как хотите, она всегда будет открывать вход файла при нажатии.

Если вы не хотите использовать jQuery, замените тег script тегом script:

<script>
   function chooseFile() {
      document.getElementById("fileInput").click();
   }
</script>

Ответ 2

Попробуйте это управляемое решение. (Я попробовал это сегодня для одного из моих проектов:))

HTML

  <div class="choose_file">
        <span>Choose File</span>
        <input name="Select File" type="file" />
    </div>

CSS

.choose_file{
    position:relative;
    display:inline-block;    
    border-radius:8px;
    border:#ebebeb solid 1px;
    width:250px; 
    padding: 4px 6px 4px 8px;
    font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
    color: #7f7f7f;
    margin-top: 2px;
    background:white
}
.choose_file input[type="file"]{
    -webkit-appearance:none; 
    position:absolute;
    top:0; left:0;
    opacity:0; 
}

DEMO

Ответ 3

Вы можете настроить его, используя только CSS. Перейдите по ссылке ниже.

HTML

<label class="btn-upload">
   <input type="file" name="fileupload">
   <button class="btn">Browse</button>
</label>

.btn-upload {
    position: relative;
    overflow: hidden;
    display: inline-block;
}
.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

http://imdebasispanda.blogspot.in/2015/08/custom-upload-button-using-css.html

Ответ 4

    <body>

    <style>
   .image{
  position:relative;
   display:inline-block;    
     width:3%; 
   padding: 0%;
    }
.image input[type="file"]{
-webkit-appearance:none; 
position:absolute;
    top:0; left:0;
    opacity:0; 
     }
   </style>

  <div class="image">
    <span><img src='admin/ico/fms.ico' class "image"></span>
    <input name="image" type="file" />
  </div>
</body>