About customizing an uploaded file button

In input HTML gives us a type file for uploading files, such as

But this style, really ugly, in the development of the time to see the Layui and bootstrap click Upload, are very good.

The former call way and JS difference is too big, the latter need to introduce bootstrap fileinput.js I am not very satisfied,

Later wrote a native JS to invoke, saying I still quoted Layui CSS style, because it is really good

Look at the code.

 1  <  input  type  = "file"   onchange  = "Upload ()"   style  = "Display:none"   ID  = "File-input"  />  2  <   Button  onclick  = ' selectfile () '  Span style= "COLOR: #0000ff" >>  upload </  Button  >  

This is the HTML that was not introduced before the Layui class, his input type file is hidden by default and we can

Click event on the button to simulate input

var inputBox = document.getElementById ("File-input");                 function Selectfile () {            Inputbox.click ()        }        

After clicking, input is the equivalent of being clicked, starting to upload the file, when uploading the file, input bound onchange ();

This is a loaded function.

functionupload () {//alert (123);            varFile = Inputbox.files[0]            if(!file) {Alert (' Please select file ')                return            }            varform =NewFormData () form.append (' File ', file)varXHR =NewXMLHttpRequest (); Xhr.open ("Post", '. /.. /api/receiveoptionquestion ',true); Xhr.onload=function() {alert (xhr.responsetext);            }; Xhr.upload.addEventListener ("Progress",function(e) {Console.log (e.loaded/e.total * 100)            }, false);        Xhr.send (form); }

Define the uploaded interface in the Open method and return the data to ResponseText

When loading data, bind a progress event that can be e.loaded/e.total*100+ "%" to get the current progress (percentage)

Last Pass Value

About customizing an uploaded file button