相关疑难解决方法(0)

如何设置输入type="file"按钮的样式.

我正在尝试根据个人喜好设置文件上传按钮的样式,但如果没有JS,我找不到任何真正可行的方法.我确实找到了 关于这个主题的另外两个问题,但那里的答案要么涉及JavaScript,要么建议采用Quirksmode的方法.

这个Quirksmode方法的主要问题是文件按钮仍然具有浏览器定义的尺寸,因此它不会自动调整为用作放置在它下面的按钮的任何东西.我已经制作了一些基于它的代码,但它只占用了文件按钮通常占用的空间,所以它根本不会像我想要的那样填充父div.

HTML:

<div class="myLabel">
    <input type="file"/>
    <span>My Label</span>
</div>

CSS:

.myLabel {
    position: relative;
}
.myLabel input {
    position: absolute;
    z-index: 2;
    opacity: 0;
    width: 100%;
    height: 100%;
}

这个小提示演示了这种方法是如何存在严重缺陷的.在Chrome中,单击!!下面的第二个演示按钮将打开文件对话框,但在所有其他浏览器中,文件按钮不会占用按钮的正确区域.

有没有更坚实的方式来设置文件上传按钮的样式,没有任何JavaScript,并且最好使用尽可能少的"hacky"编码(因为黑客通常带来其他问题,例如小提琴中的那些)？

是否可以设置文件类型的输入元素的样式而不必担心浏览器兼容性？在我的情况下,我需要实现一个背景图像和圆形边框(1px),如果可能的话,也应该定制按钮.

为了使点击式div,我做:

<div class="clickable" url="http://google.com">
    blah blah
</div>

然后

$("div.clickable").click(
function()
{
    window.location = $(this).attr("url");
});

我不知道这是否是最好的方式,但除了一个问题外,它与我完美配合:如果div包含可点击的元素,例如<a href="...">,则用户点击超链接,调用超链接和div可点击

当锚标记引用javascript AJAX函数时,这尤其是一个问题,该函数执行AJAX函数并遵循div的'url'属性中的链接.

无论如何围绕这个？

使用bootstrap,我创建input-group了一个button和input type='file'.

除了以外它在各处都很好IE9.在IE9上,正在从右侧裁剪浏览按钮.

演示: http ://jsbin.com/alESiBo/6/edit

码:

<div class="input-group">
  <span class="input-group-btn">
    <button class="btn btn-default" type="button">
      <i class="icon-upload-alt"></i>&nbsp;Upload
    </button>
  </span>
  <input id="fileField" class="form-control" name="fileField" type="file" />
</div>

输出:

IE 9.0.8112.16421

Chrome 31.0.1650.63 m

带快照的IE版本:

我有一个文本字段和按钮与以下css:

JS小提琴链接:http://jsfiddle.net/Tdkre/

.submit {
      -moz-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      -webkit-box-shadow:inset 0px 1px 0px 0px #cae3fc;
      box-shadow:inset 0px 1px 0px 0px #cae3fc;
      background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4197ee) );
      background:-moz-linear-gradient( center top, #79bbff 5%, #4197ee 100% );
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4197ee');
      background-color:#79bbff;
     -moz-border-radius:6px;
     -webkit-border-radius:6px;
     border-radius:6px;
     border:1px solid #469df5;
     display:inline-block;
     color:#ffffff;
     font-family:arial;
     font-size:14px;
     font-weight:bold;
     padding:5px 14px;
     text-decoration:none;
     text-shadow:1px 1px 0px #287ace;
    cursor:pointer;
}
.submit:hover {
     background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4197ee), color-stop(1, #79bbff) ); …

有没有办法<input type="file">在使用CSS的所有浏览器中看起来相同？

我正在尝试使用Rails创建一个按钮,使用Rails上传图片.我试过这个:

<input class="tiny round disabled button" name="picture[picture]" type="file">

不幸的是,它没有工作,并创建了两个不同的按钮,让您选择一张图片.我需要专门为文件字段做些什么吗？

每个人都希望（并且应该）知道如何在 html 表单中设置文件输入的样式（并且有几种众所周知的技术）。但我更想知道为什么我们必须与一个看似微不足道的技术限制作斗争，而且比一切都重要。

我对w3c 文档不太满意，所以也许我在研究过程中完全错过了它，但我找不到任何关于这个问题起源的可靠文档（参考文献会很好）。

我正在尝试设置我的输入:文件.以下SO问题让我在95%的路上.不同之处在于我使用的是HTML5 multiple = multiple属性.

如何用CSS3/Javascript设置"输入文件"的样式？

JS

        $('#choose-files-button').click(function () {
            $(':file').trigger('click');
        });

        $(':file').change(function () {
            $this = $(this);
            $('#files-selected').text($this.val());
        })

HTML

    @using (Html.BeginForm("Upload", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <span id="choose-files-button" class="btn btn-info">Choose Files</span>
        <span id="files-selected"></span>
        <button class="pull-right btn btn-primary" type="submit">Upload</button>
        <div style="height:0; width:0;overflow:hidden;">
            <input type="file" name="files" id="files" multiple="multiple" value="Add Images" />
        </div>
    }

问题

问题是当选择文件的文本设置时,它只在Chrome中显示一个文件名.我还没有测试过其他浏览器.它将它设置为类似C:/Fakepath/asfd.jpg.当你使用<input type="file" name="files" multiple="multiple" />它时,它会显示选择的3个文件,这是我试图模仿的行为.

有没有办法获得该文本,或获取所选文件的数量？

我需要从下面的表单自定义文件上传按钮.

现在我的fileupload按钮看起来像fileupload image.I需要自定义它像自定义文件上传图像

<form id="myform" action="" enctype="multipart/form-data">

    <input id="tele" type="file" name="filename" />
    <br/>
    <input class="btn" type="submit" value="Upload" />
</form>