How to customize <input type=“file”>?

2019-01-01 10:35发布

站内文章 / HTML/CSS
33 0 0

问题:

Is it possible to change the appearance of <input type=\"file\">?

回答1:

You can’t modify much about the input[type=file] control itself.

Since clicking a label element correctly paired with an input will activate/focus it, we can use a label to trigger the OS browse dialog.

Here is how you can do it…

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\" />

The CSS for the form control will make it appear invisible and not take up space in the document layout, but will still exist so it can be activated via the label.

If you want to display the user’s chosen path after selection, you can listen for the change event with JavaScript and then read the path that the browser makes available to you (for security reasons it can lie to you about the exact path). A way to make it pretty for the end user is to simply use the base name of the path that is returned (so the user simply sees the chosen filename).

There is a great guide by Tympanus for styling this.



回答2:

Something like that maybe?

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


回答3:

  <label for=\"fusk\">dsfdsfsd</label>
  <input id=\"fusk\" type=\"file\" name=\"photo\" style=\"display: none;\">

why not? ^_^

See the example here



回答4:

If you\'re using bootstrap here is a better solution : 

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

For IE8 and below http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Source : https://stackoverflow.com/a/18164555/625952



回答5:

In webkit you can try this out...

input[type=\"file\"]::-webkit-file-upload-button{
   /* style goes here */
}


回答6:

first of all it\'s a container:

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

The second, it\'s a CSS style, if you want to real more customization, just keeping your eyes is open :)

.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;
}

This example hasn\'t style for text inside the button, it depends on font-size, just correct the height and padding-top values for container



回答7:

It\'s much better if you just use a <label>, hide the <input>, and customize the label.

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 */
}


回答8:

The trick is hide the input and customize the label.

\"enter

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;
}

You can check this example: https://jsfiddle.net/rjurado/hnf0zhy1/4/



回答9:

Easiest way..

<label>
     Upload
    <input type=\"file\" style=\"visibility: hidden;\"/>
</label>


回答10:

Bootstrap example

<label className=\"btn btn-info btn-lg\">
  Upload
  <input type=\"file\" style=\"display: none\" />
</label>


回答11:

Here is one way which I like because it makes the input fill out the whole container. The trick is the \"font-size: 100px\", and it need to go with the \"overflow: hidden\" and the relative position.

<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;
}


回答12:

You can style them, but you can\'t remove the elements that are already there. If you\'re creative, you can work with that and do something like this:

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/

I suggest you play around with this code, remove lines, add your own, do whatever until you get something that looks how you like!



回答13:

I went for this option which clarifies how to fully customize the browse button by including an handler of the uploaded file name, also customized. It adds additional fields and client-side controls on them just to show how to include the browse in a \"real\" form, not just a standalone.

Here\'s the 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>



回答14:

to show path of selected file you can try this on html : 

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

and in 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;
            }
        }

and style : 

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;
}


回答15:

Just style a normal button however you want, using your favorite CSS.

Then call a simple JS function to create and link a hidden input element to your styled button. Don\'t add browser-specific CSS to do the hiding part.

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

Notice how the above code re-links it after every time the user chooses a file. This is important because \"onchange\" is only called if the user changes the filename. But you probably want to get the file every time the user provides it.

For more details, research DropZone and gmail uploads.



回答16:

 $(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>

This is my fully functional customerized file upload/Attachment using jquery & javascript (Visual studio). This will be useful !

Code will be available at the comment section !

Link : https://youtu.be/It38OzMAeig

Enjoy :) 

 $(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>



回答17:

Here is one way I recently discovered, with a bit of jQuery

HTML Code:

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

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

For the javascript/jQuery part :

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

In this example, I have put an \"anchor\" tag to trigger the file upload. You can replace with anything you want, just remember to put the \"onclick\" attribute with the proper function.

Hope this helps!

P.S. : Do not forget to include jQuery from CDN or any other source



标签： html css file-upload input
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~