15

我放置了一个用于上传图像文件的按钮。我想自定义该按钮，我想添加多个图像文件，实现的逻辑是什么。

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

如何执行此操作以改进我的网站。

谢谢

4

4 回答 4

47

您可以通过将输入放入 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>
于 2013-04-18T10:48:50.010 回答
7

试试这个操纵的解决方案。（我今天为我的一个项目尝试了它:)）

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; 
}

演示

于 2013-04-18T10:37:41.600 回答
1

您可以仅使用 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

于 2015-08-15T19:29:43.060 回答
0 
    <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>
于 2017-02-12T15:46:40.107 回答