用图像替换input type = file

Question

像很多人一样,我想定制丑陋的input type=file,我知道没有一些黑客和/或它就无法做到javascript.但是,在我的情况下,上传文件按钮只是用于上传图像(jpeg | jpg | png | gif),所以我想知道我是否可以使用一个clickable完全像输入类型文件一样的" "图像(显示对话框,并在提交的页面上显示相同的$ _FILE).
我在这里找到了一些解决方法,这个也很有趣(但不适用于Chrome = /).

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

Answer 1

这对我很有用:

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

造型:

<div class="image-upload">
  <label for="file-input">
    <img src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg"/>
  </label>

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

基本上,标签的for属性使得单击标签与单击指定的输入相同.

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

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

编辑: 在这里添加JSFiddle:https : //jsfiddle.net/c5s42vdz/

Answer 2

实际上它可以在纯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/

Answer 3

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

如果输入文件类型标签在FORM标签中,我使用visibility: hidden, width:0而不是display: none用于safari问题并添加pointer-events: none到img标签中以使其工作.

似乎在所有主流浏览器中为我工作.

希望它可以帮助某人.

Answer 4

比编写 JS 更好的方法是使用 native，它变得比建议的更轻：

<label>
  <img src="my-image.png">
  <input type="file" name="myfile" style="display:none">
</label>

这样label自动连接到隐藏的输入。单击标签就像单击字段一样。

Answer 5

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

任何<input type="file">基于变通方法，试图触发比点击实际控制其它方式的“打开文件”对话框可以从在任何时候安全原因的浏览器中移除。（我认为在当前版本的 FF 和 IE 中，不可能再以编程方式触发该事件。）

Answer 6

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

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>

Answer 7

您可以用新选择的图像自动替换图像。

<div class="image-upload">
      <label for="file-input">
        <img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
      </label>

      <input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
    </div>




<script>
        function previewFile(input){
            var file = $("input[type=file]").get(0).files[0];

            if(file){
              var reader = new FileReader();

              reader.onload = function(){
                  $("#previewImg").attr("src", reader.result);
              }

              reader.readAsDataURL(file);
            }
        }
    </script>

Answer 8

在过去的十年里，我遇到了很多隐藏和不可见输入的问题，有时事情比我们想象的要简单得多。

我对 IE 5、6、7、8 和 9 有一个小小的愿望，那就是不支持不透明度，因此文件输入将覆盖上传图像，但是以下 css 代码已经解决了该问题。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

以下截图是在 chrome、IE 5、6、7、8、9、10 上测试的，IE 5 中唯一的问题是它不支持自动边距。

运行代码片段只需复制并粘贴 CSS 和 HTML，根据需要修改大小。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);  

.file-upload{
	height:100px;
	width:100px;
	margin:40px auto;
	border:1px solid #f0c0d0;
	border-radius:100px;
	overflow:hidden;
	position:relative;
}
.file-upload input{
	position:absolute;
	height:400px;
	width:400px;
	left:-200px;
	top:-200px;
	background:transparent;
	opacity:0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);  
}
.file-upload img{
	height:70px;
	width:70px;
	margin:15px;
}