自定义图像上传的文件按钮

Question

我放置了一个上传图像文件的按钮.我想自定义该按钮,我想添加多个图像文件,这是什么逻辑来实现.

<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文本前保留相机图像.

如何执行此操作以改善我的网站.

谢谢

Answer 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>
   function chooseFile() {
      document.getElementById("fileInput").click();
   }
</script>

Answer 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