如何自定义<input type =“ file”>？

164

可以改变外观<input type="file">吗？

html  css  file-upload  input 
— 新手编码器
source
文本字段存在的原因是，它在用户浏览并选择文件后向用户显示文件路径。
— k to z
糟糕。似乎是Firefox处理它的方式...
— Newbie Coder
只是我们很清楚，即使他们浏览了文件，他们仍然必须使用表单提交按钮提交表单。
— k to z
2
请查看此解决方案，以获取更简单的方法。
— Joeytje50 2015年
1
将将来的问题标记为较旧的问题有点奇怪。是否可以设置先提问然后关闭原始问题的优先级？在这里重复已经是一个大问题。我确实认为重新提出现有答案已过时的问题很有价值，但是始终可以编辑问题并添加/编辑新答案。
— Alex

Answers:

235

您不能对input[type=file]控件本身进行太多修改。

由于单击label与输入正确配对的元素会激活/聚焦它，因此我们可以使用label触发OS浏览对话框。

这是您的操作方法...

label {
   cursor: pointer;
   /* Style as you please, it will become the visible UI component. */
}

#upload-photo {
   opacity: 0;
   position: absolute;
   z-index: -1;
}
<label for="upload-photo">Browse...</label>
<input type="file" name="photo" id="upload-photo" />
展开摘要

表单控件的CSS将使它看起来不可见，并且不会在文档布局中占用空间，但是仍然存在，因此可以通过激活它label。

如果要在选择后显示用户选择的路径，可以change使用JavaScript 监听事件，然后读取浏览器提供给您的路径（出于安全原因，它可能位于向您确切的路径）。使最终用户满意的一种方法是简单地使用返回路径的基本名称（这样用户便可以看到所选的文件名）。

鼓膜有一个很好的指南来设计样式。

— 亚历克斯
source
2
我认为，这些是更好的样式，考虑到我们的目标是通过单击容器上的任意位置来打开选择文件对话框：#container { position: relative; width: ...px; height: ...px; overflow: hidden; } #input { position: absolute; right: 0; font-size: <many a>px; opacity: 0; margin: 0; padding: 0; border: none; }
— x-yuri
1
使用<label>（如Tympanus所示）的语义要多得多，hacky要少得多。此外，几年后再次问了这个问题，并且在那里有了更好的答案：跨浏览器自定义样式的文件上传按钮。
— Dan Dascalescu
1
@DanDascalescu我同意，如果我能正确记得（早在2011年）它在IE中存在问题，可能是6或7。我将编辑此答案以将其带入未来。
— 亚历克斯
为什么使用标签会更好？您不能使用标签来标记标签，此外，按钮对我而言比激活对话框更有意义。
— 路易·玛丽·马修斯
1
@alex，它没有显示文件名。
— Naren Verma，
33

大概是这样吗？

<form>
  <input id="fileinput" type="file" style="display:none;"/>
</form>
<button id="falseinput">El Cucaratcha, for example</button>
<span id="selected_filename">No file selected</span>

<script>
$(document).ready( function() {
  $('#falseinput').click(function(){
    $("#fileinput").click();
  });
});
$('#fileinput').change(function() {
  $('#selected_filename').text($('#fileinput')[0].files[0].name);
});

</script>
— Konservin
source
1
在这种情况下，即9将不允许将表单发送到iframe。
— x-yuri 2013年
@ x-yuri是什么意思？
— 米卡·费利克斯
2
据我所知，即9（可能还有其他）不允许将表单发送到iframe，因为用户没有单击输入文件。
— x-yuri
display: none将从制表符顺序中删除输入，使页面的访问性降低。使用<label>（如Tympanus所示）的语义要多得多，hacky要少一些。此外，几年后再次问了这个问题，并且在那里有了更好的答案：跨浏览器自定义样式的文件上传按钮。
— Dan Dascalescu 2016年
在选择器中固定了闭合的方括号拼写错误，以使代码实际起作用
— ConstantinGroß19年
23 
  <label for="fusk">dsfdsfsd</label>
  <input id="fusk" type="file" name="photo" style="display: none;">

为什么不？^ _ ^

看到这里的例子

— jt3k
source
4
@InakiIbarrolaAtxa您可以提供数据来支持这一点吗？
— Ben Leggiero 2014年
1
在Chrome 51中不设置任何样式。使用<label>（如鼓膜显示）在语义上是正确的解决方案。此外，几年后再次问了这个问题，并且在那里有了更好的答案：跨浏览器自定义样式的文件上传按钮。
— Dan Dascalescu
12

如果您使用的是引导程序，那么这是一个更好的解决方案：

<label class="btn btn-default btn-file">
    Browse <input type="file" style="display: none;">
</label>

对于IE8及以下版本 ：http：//www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

来源：https : //stackoverflow.com/a/18164555/625952

— 瓦迪
source
尽管此链接可以回答问题，但最好在此处包括答案的基本部分，并提供链接以供参考。如果链接的页面发生更改，仅链接的答案可能会失效。- 来自评论
— Tom
完成，我仅举了一个例子
— Ouadie
6

在webkit中，您可以尝试一下...

input[type="file"]::-webkit-file-upload-button{
   /* style goes here */
}
— 克里斯托弗·里德
source
您是否知道Firefox的任何类似解决方案？是否存在？）
— Artem Z.
5

首先是一个容器：

<div class="upload_file_container">
    Select file!
    <input type="file" name="photo" />
</div>

第二种是CSS样式，如果您想进行更多自定义，只需睁大眼睛:)

.upload_file_container{
   width:100px;
   height:40px;
   position:relative;
   background(your img);
}

.upload_file_container input{
   width:100px;
   height:40px;
   position:absolute;
   left:0;
   top:0;
   cursor:pointer;
}

此示例没有为按钮内的文本设置样式，它取决于字体大小，只需更正容器的高度和padding-top值

— 朱里·卡拉舍夫（Juri Karasjov）
source
我不知道你为什么不让它right: 0代替left: 0？这样，您将可以将ie的文本框移出容器。单击文本框不会打开选择文件对话框。另外，我认为将输入文件设为大font-size是更好的主意，然后使用width和height。
— x-yuri 2013年
5

诀窍是隐藏输入并自定义标签。

在此处输入图片说明

HTML：

<div class="inputfile-box">
  <input type="file" id="file" class="inputfile" onchange='uploadFile(this)'>
  <label for="file">
    <span id="file-name" class="file-box"></span>
    <span class="file-button">
      <i class="fa fa-upload" aria-hidden="true"></i>
      Select File
    </span>
  </label>
</div>

CSS：

.inputfile-box {
  position: relative;
}

.inputfile {
  display: none;
}

.container {
  display: inline-block;
  width: 100%;
}

.file-box {
  display: inline-block;
  width: 100%;
  border: 1px solid;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;
  height: calc(2rem - 2px);
}

.file-button {
  background: red;
  padding: 5px;
  position: absolute;
  border: 1px solid;
  top: 0px;
  right: 0px;
}

JS：

function uploadFile(target) {
    document.getElementById("file-name").innerHTML = target.files[0].name;
}

您可以检查以下示例：https : //jsfiddle.net/rjurado/hnf0zhy1/4/

— drinor
source
我喜欢您的字体使用Awesome字体图标的方式，与其他任何图标不同。
— Max Voisard '19年
4

如果只使用a <label>，隐藏<input>，和自定义标签会更好。

HTML：

<input type="file" id="input">
<label for="input" id="label">Choose File</label>

CSS： 

input#input{
    display: none;
}
label#label{
    /* Customize your label here */
}
— 博格丹M.
source
display: none将从选项卡顺序中删除该元素。使用<label>（如Tympanus所示）在语义上是正确的，但是需要一些改进。此外，几年后再次问了这个问题，并且在那里有了更好的答案：跨浏览器自定义样式的文件上传按钮。
— Dan Dascalescu
2

要显示所选文件的路径，您可以在html上尝试： 

<div class="fileinputs">
    <input type="file" class="file">
</div>

并在javascript中：

        var fakeFileUpload = document.createElement('div');
        fakeFileUpload.className = 'fakefile';
        var image = document.createElement('div');
        image.className='fakebtn';
        image.innerHTML = 'browse';
        fakeFileUpload.appendChild(image);
        fakeFileUpload.appendChild(document.createElement('input'));
        var x = document.getElementsByTagName('input');
        for (var i=0;i<x.length;i++) {
            if (x[i].type != 'file') continue;
            if (x[i].parentNode.className != 'fileinputs') continue;
            x[i].className = 'file hidden';
            var clone = fakeFileUpload.cloneNode(true);
            x[i].parentNode.appendChild(clone);
            x[i].relatedElement = clone.getElementsByTagName('input')[0];
            x[i].onchange = x[i].onmouseout = function () {
                this.relatedElement.value = this.value;
            }
        }

和风格： 

div.fileinputs {
    position: relative;
    height: 30px;
    width: 370px;
}
input.file.hidden {
    position: relative;
    text-align: right;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
}
div.fakefile {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    width: 370px;
    padding: 0;
    margin: 0;
    z-index: 1;
    line-height: 90%;
}
div.fakefile input {
    margin-bottom: 5px;
    margin-left: 0;
    border: none;
    box-shadow: 0px 0px 2px 1px #ccc;
    padding: 4px;
    width: 241px;
    height: 20px;
}
div.fakefile .fakebtn{
    width: 150px;
    background: #eb5a41;
    z-index: 10;
    font-family: roya-bold;
    border: none;
    padding: 5px 15px;
    font-size: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
    display: inline;
    margin-left: 3px;
}
div.fileinputs input[type="file"]:hover + div .fakebtn{
    background: #DA472E;
}

div.fileinputs input[type="file"] {
    opacity: 0;
    position: absolute;
    top: -6px;
    right: 0px;
    z-index: 20;
    width: 102px;
    height: 40px;
    cursor: pointer;
}
— 萨加尔法代伊
source
Salam saghar，这对我来说是最好的答案，谢谢
— ucMedia
2

引导程序示例

<label className="btn btn-info btn-lg">
  Upload
  <input type="file" style="display: none" />
</label>
— 朱利安卡马祖
source
1

我选择了此选项，该选项阐明了如何通过包括也已自定义的上载文件名的处理程序来完全自定义浏览按钮。它在上面添加了其他字段和客户端控件，只是为了说明如何以“真实”形式（而不是独立的）包括浏览。

这是codepen：http ://codepen.io/emiemi/pen/zxNXWR

JS：

//click on our custom btn triggers a click on the hidden actual file input 
$("#btnup").click(function(){
   $("#fileup").click();    
});


//changes on the three fields (input, tit,and name) trigger a control which checks if the 3 fields are all filled and if file field is valid (an image is uploaded)
$('#fileup').change(function(){
    var formDOMObj = document.upload;
//here we assign tu our text field #fileup the name of the selected file  
    var res=$('#fileup').val();
    var arr = res.split("\\");
//if file is not valid we show the error icon and the red alert
    if (formDOMObj.fileup.value.indexOf(".jpg") == -1 && formDOMObj.fileup.value.indexOf(".png") == -1 &&  formDOMObj.fileup.value.indexOf(".jpeg") == -1 && formDOMObj.fileup.value.indexOf(".bmp") == -1 && formDOMObj.fileup.value.indexOf(".JPG") == -1 && formDOMObj.fileup.value.indexOf(".PNG") == -1 &&  formDOMObj.fileup.value.indexOf(".JPEG") == -1 && formDOMObj.fileup.value.indexOf(".BMP") == -1){
        $( ".imgupload" ).hide("slow"); 
        $( ".imguploadok" ).hide("slow");   
        $( ".imguploadstop" ).show("slow");
        $('#nomefile').css({"color":"red","font-weight":700});
        $('#nomefile').html("The file "+arr.slice(-1)[0]+" is not an image!");
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }else{
 //if file is valid we show the green alert
    $( ".imgupload" ).hide("slow");
    $( ".imguploadstop" ).hide("slow");
    $( ".imguploadok" ).show("slow");
    $('#nomefile').html(arr.slice(-1)[0]);
    $('#nomefile').css({"color":"green","font-weight":700});
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
  //if all three fields are valid the fake input btn is hidden and the actual one i s finally hown
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }
    }
});


$('#nome').change(function(){
//same as file change but on name field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});
$('#tit').change(function(){
 //same as file change but on tit field
    var formDOMObj = document.upload;
    if (formDOMObj.nome.value!=""&&formDOMObj.tit.value!=""&&formDOMObj.fileup.value!=""){
        $( "#fakebtn" ).hide();
        $( "#bottone" ).show();
    }else{
        $( "#bottone" ).hide();
        $( "#fakebtn" ).show();
    }
});

HTML：

<form name="upload" method="post" action="/" enctype="multipart/form-data" accept-charset="utf-8">
<div class="row">
  <div class="col-md-6 center">
<!--this is the actual file input, s hidden beacause we wanna use our custom one-->
    <input type="file" value="" class="hidden" name="fileup" id="fileup">
    <div class="btn-container">
<!--the three icons: default, ok file (img), error file (not an img)-->
      <h1 class="imgupload"><i class="fa fa-file-image-o"></i></h1>
      <h1 class="imguploadok"><i class="fa fa-check"></i></h1>
      <h1 class="imguploadstop"><i class="fa fa-times"></i></h1>
<!--this field changes dinamically displaying the filename we are trying to upload-->
      <p id="nomefile">Only pics allowed! (jpg,jpeg,bmp,png)</p>
<!--our custom btn which triggers the actual hidden one-->
      <button type="button" id="btnup" class="btn btn-primary btn-lg">Browse for your pic!</button>
    </div>
  </div>
<!--additional fields-->
  <div class="col-md-6">
    <div class="row">
      <div class="form-group" id="top">
        <div class="col-md-12">
          <input type="text" maxlength="100" class="form-control" name="nome" id="nome" placeholder="Your Name">
        </div>
      </div>
    </div>
    <div class="row">
      <div class="form-group">
        <div class="col-md-12">
          <input type="text" maxlength="50" class="form-control" name="tit" id="tit" placeholder="I am rubber, you are glue">
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-8">
        <p class="white">All fields are mandatory</p>
      </div>
      <div class="col-md-4">
<!--the defauld disabled btn and the actual one shown only if the three fields are valid-->
        <input type="submit" value="Submit!" class="btn btn-primary" id="bottone" style="padding-left:50px; padding-right:50px; display:none;">
        <button type="button" class="btn btn-default" disabled="disabled" id="fakebtn"  style="padding-left:40px; padding-right:40px;">Submit! <i class="fa fa-minus-circle"></i></button>
      </div>
    </div>
  </div>
</div>

— Emi-C
source
0

这是我喜欢的一种方法，因为它使输入填充整个容器。诀窍是“字体大小：100像素”，并且需要加上“溢出：隐藏”和相对位置。

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

#upload-file-container {
   width: 200px;
   height: 50px;
   position: relative;
   border: dashed 1px black;
   overflow: hidden;
}

#upload-file-container input[type="file"]
{
   margin: 0;
   opacity: 0;   
   font-size: 100px;
}
— 万佳
source
做到有道理position: absolute; right: 0; font-size: <many>px;
— x-yuri
0

您可以设置它们的样式，但是不能删除已经存在的元素。如果您有创造力，则可以使用它并执行以下操作：

input[type=file] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #EEE;
    background: linear-gradient(to top, #FFF, #DDD);
    border: thin solid rgba(0,0,0, .5);
    border-radius: .25em;
    box-shadow: inset .25em .25em .25em rgba(255,255,255, .5), inset -.1em -.1em .1em rgba(0,0,0, 0.1);
    cursor: text;
    padding: .25em;
}

http://jsfiddle.net/zr1x1m2b/1/

我建议您使用这段代码，删除行，添加自己的代码，执行任何操作，直到获得看起来像您想要的东西！

— 本·莱吉耶罗
source
1
不设置“选择文件”字样的样式。使用<label>（如Tympanus所示）是语义上的，并提供了完整的可定制性。此外，几年后再次问了这个问题，并且在那里有了更好的答案：跨浏览器自定义样式的文件上传按钮。
— Dan Dascalescu
1
@DanDascalescu你是对的！我只是提供纯CSS解决方案，以防您无法通过设置更改HTML。
— Ben Leggiero
0

只需使用自己喜欢的CSS，随意设置普通按钮的样式即可。

然后调用一个简单的JS函数来创建隐藏的输入元素并将其链接到样式按钮。不要添加特定于浏览器的CSS来隐藏部分。

<!DOCTYPE html>
<meta charset="utf-8">

<style>
    button {
        width            : 160px;
        height           : 30px;
        font-size        : 13px;
        border           : none;
        text-align       : center;
        background-color : #444;
        color            : #6f0;
    }
    button:active {
        background-color : #779;
    }
</style>

<button id="upload">Styled upload button!</button>

<script>

function Upload_On_Click(id, handler) {
    var hidden_input = null;
    document.getElementById(id).onclick = function() {hidden_input.click();}
    function setup_hidden_input() {
        hidden_input && hidden_input.parentNode.removeChild(hidden_input);
        hidden_input = document.createElement("input");
        hidden_input.setAttribute("type", "file");
        hidden_input.style.visibility = "hidden";
        document.querySelector("body").appendChild(hidden_input);
        hidden_input.onchange = function() {
            handler(hidden_input.files[0]);
            setup_hidden_input();
        };
    }
    setup_hidden_input();
}

Upload_On_Click("upload", function(file) {
    console.log("GOT FILE: " + file.name);
});

</script>

请注意，每次用户选择文件后，上面的代码将如何重新链接它。这很重要，因为仅当用户更改文件名时才调用“ onchange”。但是您可能希望每次用户提供文件时都获取该文件。

有关更多详细信息，请研究DropZone和gmail上传。

— personal_cloud
source
0 

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
展开摘要

这是我使用jQuery和javascript（Visual Studio）的功能齐全的客户化文件上传/附件。这将是有用的！

代码将在注释部分可用！

连结： https //youtu.be/It38OzMAeig

请享用 ：） 

 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
展开摘要

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 $(document).ready(function () {
        $(document).mousemove(function () {
        $('#myList').css('display', 'block');
        $("#seebtn").css('display', 'none');
        $("#hidebtn").css('display', 'none');
        $('#displayFileNames').html('');
        $("#myList").html('');
        var fileArray1 = document.getElementsByClassName('file-input');
        for (var i = 0; i < fileArray1.length; i++) {
            var files = fileArray1[i].files;
            for (var j = 0; j < files.length; j++) {
                $("#myList").append("<li style='color:black'>" + files[j].name + "</li>");
            }
        };

        if (($("#myList").html()) != '') {
            $('#unselect').css('display', 'block');
            $('#divforfile').css('color', 'green');
            $('#attach').css('color', 'green');
            $('#displayFileNames').html($("#myList").children().length + ' ' + 'files selezionato');

        };

        if (($("#myList").html()) == '') {
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');
            $('#displayFileNames').append('Nessun File Selezionato');
        };
    });

  });

  function choosefiles(obj) {
        $(obj).hide();
        $('#myList').css('display', 'none');
        $('#hidebtn').css('display', 'none');
        $("#seebtn").css('display', 'none');
        $('#unselect').css('display', 'none');
        $("#upload-form").append("<input class='file-input inputs' type='file' onclick='choosefiles(this)' name='file[]' multiple='multiple' />");
        $('#displayFileNames').html('');
    }

  $(document).ready(function () {
        $('#unselect').click(function () {
            $('#hidebtn').css('display', 'none');
            $("#seebtn").css('display', 'none');
            $('#displayFileNames').html('');
            $("#myList").html('');
            $('#myFileInput').val('');
            document.getElementById('upload-form').reset();         
            $('#unselect').css('display', 'none');
            $('#divforfile').css('color', 'black');
            $('#attach').css('color', 'black');

        });
    });
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
  .divs {
        position: absolute;
        display: inline-block;
        background-color: #fff;
    }

    .inputs {
        position: absolute;
        left: 0px;
        height: 2%;
        width: 15%;
        opacity: 0;
        background: #00f;
        z-index: 100;
    }

    .icons {
        position: absolute;
    }

 </style>
 <div>
                <form id='upload-form' action='' method='post' enctype='multipart/form-data'>
                   
                    <div class="divs" id="divforfile" style="color:black">
                        <input id='myFileInput' class='file-input inputs' type='file' name='file[]' onclick="choosefiles(this)" multiple='multiple' />
                        <i class="material-icons" id="attach" style="font-size:21px;color:black">attach_file</i><label>Allegati</label>
                    </div>
                </form>
                <br />
            </div>
            <br />  
            <div>
                <button style="border:none; background-color:white; color:black; display:none" id="seebtn"><p>Files &#9660;</p></button>
                <button style="border:none; background-color:white; color:black; display:none" id="hidebtn"><p>Files &#9650;</p></button>
                <button type="button" class="close" aria-label="Close" id="unselect" style="display:none;float:left">
                    <span style="color:red">&times;</span>
                </button>
                <div id="displayFileNames">
                </div>
                <ul id="myList"></ul>
            </div>
展开摘要

— 米兰马杜巴沙
source
0

这是一个快速的纯CSS解决方法（可在chrome上使用，并包含FireFox后备功能），包括文件名，标签和自定义上传按钮，可完成应做的工作-完全不需要JavaScript！🎉

注意：☝这可以在Chrome上使用，并且具有FireFox备用功能-无论如何，如果您认为浏览器兼容性（应该是这样），我不会在现实世界的网站上使用它。因此，这更具实验性。

.fileUploadInput {
  display: grid;
  grid-gap: 10px;
  position: relative;
  z-index: 1; }
  
  .fileUploadInput label {
    display: flex;
    align-items: center;
    color: setColor(primary, 0.5);
    background: setColor(white);
    transition: .4s ease;
    font-family: arial, sans-serif;
    font-size: .75em;
    font-weight: regular; }
    
  .fileUploadInput input {
    position: relative;
    z-index: 1;
    padding: 0 gap(m);
    width: 100%;
    height: 50px;
    border: 1px solid #323262;
    border-radius: 3px;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: regular; }
    .fileUploadInput input[type="file"] {
      padding: 0 gap(m); }
      .fileUploadInput input[type="file"]::-webkit-file-upload-button {
        visibility: hidden;
        margin-left: 10px;
        padding: 0;
        height: 50px;
        width: 0; }
        
  .fileUploadInput button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50px;
    height: 50px;
    line-height: 0;
    user-select: none;
    color: white;
    background-color: #323262;
    border-radius: 0 3px 3px 0;
    font-family: arial, sans-serif;
    font-size: 1rem;
    font-weight: 800; }
    .fileUploadInput button svg {
      width: auto;
      height: 50%; }

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  border: 0px;
  outline: 0;
  background-repeat: no-repeat;
  appearance: none;
  border-radius: 0;
  vertical-align: middle;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  text-decoration: none;
  list-style: none;
  user-select: text;
  line-height: 1.333em; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(66, 50, 98, 0.05); }

.container {
  padding: 25px;
  box-shadow: 0 0 20px rgba(66, 50, 98, 0.35);
  border: 1px solid #eaeaea;
  border-radius: 3px;
  background: white; }

@-moz-document url-prefix() {
.fileUploadInput button{
    display: none
}
}
<!-- Author: Ali Soueidan-->
<!-- Author URI: https//: www.alisoueidan.com-->

<div class="container">
    <div class="fileUploadInput">
    <label>✨ Upload File</label>
    <input type="file" />
    <button>+</button></div>
</div>
展开摘要

— 拉兹卡夫曼
source
-2

这是我最近发现的一种方法，带有一些jQuery

HTML代码：

<form action="">
    <input type="file" name="file_upload" style="display:none" id="myFile">

    <a onclick="fileUpload()"> Upload a file </a>
</form>

对于javascript / jQuery部分：

<script>
function fileUpload() {
    $("#myFile").click();
}
</script>

在此示例中，我放置了一个“ anchor”标签来触发文件上传。您可以用任何所需的内容替换，只需记住将“ onclick”属性放入适当的函数即可。

希望这可以帮助！

PS：不要忘了包含CDN或任何其他来源的jQuery

— 阿卡什
source
display: none将从制表符顺序中删除输入。使用<label>（如Tympanus所示）的语义要多得多，hacky要少一些。此外，几年后再次问了这个问题，并且在那里有了更好的答案：跨浏览器自定义样式的文件上传按钮。
— Dan Dascalescu
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.