首页 文章

用图像替换input type = file

提问于
浏览 次
76

像很多人一样，我想定制丑陋的 input type=file ，我知道如果没有一些黑客和/或 javascript 就无法完成 . 但是，在我的情况下，上传文件按钮仅用于上传图像（ jpeg|jpg|png|gif ），所以我想知道我是否可以使用“ clickable ”图像，它将完全像输入类型文件一样（显示对话框，和提交页面上的相同$ _FILE） .
我发现了一些解决方法here和this interesting one（但不适用于Chrome = /） .

当你想为文件按钮添加一些样式时，你们做了什么？如果您有任何观点，只需点击答案按钮;）

css image file button input

10 回答

  • 1

    这对我很有用：

    <div class="image-upload">
    <label for="file-input">
        <img src="placeholder.jpg"/>
    </label>

    <input id="file-input" type="file"/>
</div>

    造型：

    .image-upload > input
{
    display: none;
}

    基本上，标签的 for 属性使它成为 clicking the label is the same as clicking the specified input .

    此外，display属性设置为none使得文件输入根本不会被渲染，使其隐藏得很好 .

    在Chrome中测试但根据网络应该适用于所有主流浏览器 . :)

    EDIT: 在这里添加了JSFiddle：https://jsfiddle.net/c5s42vdz/

    回复于
  • 4

    实际上它可以在纯css中完成，而且很容易......

    HTML代码

    <label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>

    CSS样式

    label.filebutton {
    width:120px;
    height:40px;
    overflow:hidden;
    position:relative;
    background-color:#ccc;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

    我们的想法是将输入绝对放在标签内 . 将输入的字体大小设置为大的，这将增加“浏览”按钮的大小 . 然后使用负左/顶部属性进行一些试验和错误，将输入浏览按钮定位在标签后面 .

    定位按钮时，将alpha设置为1.完成后将其设置为0（这样你就可以看到你在做什么！）

    确保您在浏览器之间进行测试，因为它们都会使输入按钮的大小略有不同 .

    你可以在这里看到一个例子（添加轨道按钮）：http://rakmastering.com/upload/

    回复于
  • 213

    @hardsetting提供了很好的解决方案，但我做了一些改进，使它在Windows中与Safari（5.1.7）一起使用

    .image-upload > input {
  visibility:hidden;
  width:0;
  height:0
}

    <div class="image-upload">
  <label for="file-input">
    <img src="https://placehold.it/100/000000/ffffff?text=UPLOAD" style="pointer-events: none"/>
  </label>

  <input id="file-input" type="file" />
</div>

    我使用“visibility：hidden，width：0”而不是“display：none”来表示safari问题，并在img标签中添加了“pointer-events：none”，以便在输入文件类型标签位于FORM标签时使其正常工作 . 似乎在所有主流浏览器中都适合我 . 希望它可以帮助某人 .

    回复于
  • 0

    我会用SWFUpload或Uploadify . 他们需要Flash，但你可以毫无困难地做你想做的一切 .

    除了单击实际控件之外，尝试触发"open file"对话框的任何基于 <input type="file"> 的解决方法都可以随时从浏览器中删除 . （我认为在当前版本的FF和IE中，不可能以编程方式触发该事件 . ）

    回复于
  • 4

    如果我明白你的意思，这是我的方法

    HTML

    <label for="FileInput">
    <img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
    <input type="file" id="FileInput" style="cursor: pointer;  display: none"/>
    <input type="submit" id="Up" style="display: none;" />
</form>

    jQuery

    <script type="text/javascript">
    $( "#FileInput" ).change(function() {
      $( "#Up" ).click();
    });
</script>
    回复于
  • 2

    它非常简单你可以尝试这个：

    $("#image id").click(function(){
    $("#input id").click();
});
    回复于
  • 61

    您可以改为放置图像，并按以下方式执行：

    HTML：

    <img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1"  name="file1" style="display:none" />

    JQuery的：

    $("#upfile1").click(function () {
    $("#file1").trigger('click');
});

    CAVEAT ：在IE9和IE10中如果你通过javascript触发文件输入中的onclick，表单会被标记为'dangerous'并且无法使用javascript进行下限，不确定是否可以提交传统 .

    回复于
  • 11
    form input[type="file"] {
          display: none;
        }

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
  <title>Simple File Upload</title>
  <meta name="" content="">
</head>

<body>
  <form action="upload.php" method="post" enctype="multipart/form-data">
    Select image to upload:
    <label for="fileToUpload">
      <img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
    </label>
    <input type="File" name="fileToUpload" id="fileToUpload">
    <input type="submit" value="Upload Image" name="submit">
  </form>
</body>

</html>

    RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!

    回复于
  • 1

    输入本身隐藏了CSS可见性：隐藏 .

    然后你可以拥有你想要的任何元素 - 锚点或图像..当点击锚点/图像时，触发点击隐藏的输入字段 - 将出现用于选择文件的对话框 .

    编辑：实际上它适用于Chrome和Safari，我只是注意到FF4Beta不是这样

    回复于
  • 0

    Working Code:

    只是隐藏输入部分，并这样做 .

    <div class="ImageUpload">
   <label for="FileInput">
      <img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
   </label>

  <input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer;  display: none"/>
</div>
    回复于

相关问题