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

您可以通过将输入放入height:0px和overwflow:hidden的div来隐藏输入。然后添加一个按钮或其他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

Answer 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

Answer 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>

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

4 个答案: