Beautify the upload file button

Use the default input to upload a file button, very ugly

The button itself does not have any style, and the uploaded file name is also displayed on the right

Some people use uploadify, I do not deny the power of this plug-in, but personally think that the button of uploadify is based on flash, and flash is already an outdated technology, and Adobe has given up updating it

How can I hide the file name on the right side of the upload button and beautify the button at the same time?

Using bootstrap it can be done

First add a reference to bootstrp in the web page

<link href="https://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">

then the html code

1 <label class="btn btn-primary btn-sm" style="border-radius: 0">
2       <input type="file" id="btnUpload" name="upload" class="mFileInput" style="left:-9999px;position:absolute;">
3       <span>导入</span>
4 </label>

Results as shown below