Question

我从几个地方读过这篇文章。

我尝试过这里找到的方法：http://www.quirksmode.org/dom/inputfile.html

我无法让它发挥作用。所以我尝试了一种CSS / HTML方法，它可以在Firefox，Chrome，Safari和Opera（所有最新版本）中运行得很漂亮，但不是（你猜对了）IE8。

它看起来很好，当你单击它时，它不起作用。如果你双击它就可以了。

任何想法如何通过单击实现这一点？

目前我正在使用IE条件评论告诉用户使用IE双击选择按钮。该网站目前正在设计中，尚未向用户提供服务，并希望在此问题上线之前解决此问题。

Answer 1

一个很好的解决方案，允许您单击工作是使用标签元素，其属性＆＃34;用于＆＃34;它允许您将其连接到输入。此解决方案的另一个重要元素是在输入元素上应用filter：alpha（opacity = 0）。

HTML：

 <label for="fileupload"> 
     <input id="fileupload" type="file" >   
     <p>click here</p>
 </label>

CSS：

label {
   background-color: #ECECEC;
   display: block;
   width: 600px;
   height: 600px;
   cursor: pointer;
}

input[type="file"] {
   width: 100%;
   height: 100%;
   z-index: 100;
   position: relative;
   opacity: 0;
   filter:alpha(opacity=0); 
   cursor: pointer;
 }

Answer 2

我得到了一个解决方案，可以帮助您按照自己的方式设置按钮，并在所有浏览器中保持一键。

基本上创建一个div并给它一个类或id，例如为了让我们称之为“outer_div”。

然后将文件输入放在“outer_div”中并给它一个id，对于这个例子，我们称之为“file_input_name”。

接下来是CSS ......

对于“outer_div”，给它以下属性

    #outer_div{
    cursor:pointer;
    overflow:hidden;
    display:block;
    float:left;
    position:relative;
    width:83px;
    height:25px;
    background:url(your button image goes here) no-repeat; 
    }

确保您的按钮具有相同的宽度属性，以便使其正常工作。

接下来是file_input_name的CSS：

  #file_input_name{
position:relative;
float:left;
cursor:pointer;
right:138px;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
text-align: right;
        }

这应该可以解决问题。基本上发生的事情是我们正在输入文件，以便浏览按钮位于背景图像上方而不是文件URL的位置。

我自己做了这个，它适用于IE和Firefox / safari / chrome。

让我知道你是如何得到的，或者你是否需要更多的帮助。

Answer 3

我想我找到了两个问题的解决方案。您正在使用：filter:alpha(opacity: 0) 在.file课程中，隐藏了您通常在上传控件中看到的实际“浏览...”按钮。

第一个解决方案是使用条件设置CSS，当用户使用IE时，将使用正常但风格化的“浏览”按钮替换您喜欢的“选择”图像。

第二个是使用FileAttachment输入的大小进行播放，因此隐藏的“浏览...”按钮将适合“选择”图像的位置。从那里你只需要确保按钮的z-index属性高于图像的属性。

请告诉我这些解决方案是否能满足您的需求。

：d

Answer 4

他们必须双击的原因是因为那是“文本区域”。

此处的第一张图片是IE8上传控件。注意文本框和按钮是怎么回事。用户单击按钮或双击文本框以显示按钮。

[抱歉，我的名声不够高，无法拍照]

当你覆盖它时，文本区域与你想要单击的重叠，导致它需要双击。

下一张图片是相同的文件上传控件，没有不透明度，顶部有一个按钮，并且有一个来自IE8的DOM检查器的轮廓。如果我点击蓝色矩形的最右边部分，只需单击一下，其他地方都需要双精度。另请注意文本编辑插入符号覆盖在按钮上的文件输入中。

[图片省略]

解决方案是调整文件隐藏文件输入的大小/位置，将浏览按钮放在您想要的位置。

Answer 5

使用一些 Bootstrap 魔法，我做到了，非常简单。

好的，在您的头标签中插入 Bootstrap css 的链接后，请执行以下操作：

<div class="fileUpload btn btn-primary"> <span>Upload</span> <input type="file" class="upload" /> </div>

这将创建一个由bootstrap css设计的输入类型文件。

现在是棘手的部分：

  .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}

就是这样，现在你有一个带风格的功能按钮（输入类型文件）。

我发现this article因为我遇到了同样的问题，你可以查看它以获取更多信息。

Answer 6

基本上不是你的问题，实际上IE以不同的方式进行文件上传控制。它将文件上传控件理解为文本框和输入按钮，当您单击文件上传“浏览”或“选择”按钮时，它会打开打开对话框，但当您单击文件上传文本时，它会聚焦文本框，然后再次单击此文本框将打开打开的对话框。可以说这是IE中的预定义错误，所以我们不能做任何事情，大多数用户都知道这个问题。

Answer 7

如果您尝试隐藏默认输入按钮而不会丢失输入文件上的默认IE8行为并且还要跨浏览器支持尝试应用

input.file{
   width:0 ; 
   height:0;
}  //supposing your file input has class of .file`

在css和你的好去

Answer 8

我问了这个问题已经有一段时间了，下面是我现在用于样式文件输入的方法。此信息来自Codrops。它更详细，并提供了几个例子，但这里是基础知识：

<强> HTML

public ActionResult Login(LoginModel model)

需要检查JS

 <input type="file" name="file" id="file" class="inputfile" />
 <label for="file">Choose a file</label>

<强> CSS

<html class="no-js">
  <head>
      <!-- remove this if you use Modernizr -->
      <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
  </head>
</html>

<强> JS

.js .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.inputfile + label {
    max-width: 80%;
    font-size: 1.25rem;
    /* 20px */
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.625rem 1.25rem;
    /* 10px 20px */
}

.no-js .inputfile + label {
    display: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    /* pointer-events: none; */
    /* in case of FastClick lib use */
}

.inputfile + label svg {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    margin-top: -0.25em;
    /* 4px */
    margin-right: 0.25em;
    /* 4px */
}

样式输入类型=“文件”

8 个答案: