JSFiddle - React, Tailwind, and code Playground
HTML
<div class="file-upload">
<label class="label_cl">
<input class="uploaded-file" type="file" name="file" />
<span class = "span_cl">Выберите файл печати</span>
</label>
</div>
<br>
<div class="file-upload">
<label class="label_cl">
<input class="uploaded-file" type="file" name="file" />
<span class = "span_cl">Выберите файл печати</span>
</label>
</div>
<div class="file-upload">
<label class="label_cl">
<input class="uploaded-file" type="file" name="file" />
<span class = "span_cl">Выберите файл печати</span>
</label>
</div>
<br>
<div class="file-upload">
<label class="label_cl">
<input class="uploaded-file" type="file" name="file" />
<span class = "span_cl">Выберите файл печати</span>
</label>
</div>
CSS
html, body{margin: 0px;background-color: #aedbff;width: 100%;}
.file-upload input[type="file"]{
display: none;
}
.file-form-wrap{
width:260px;
margin:auto;
}
.file-upload {
position: relative;
overflow: hidden;
width: 200px;
height: 25px;
line-height: 25px;
background: white;
border: 1px solid black;
border-radius: 4px;
font-weight: bold;
text-align: center;
font-size: 12px;
display: inline-block;
margin: 10px 0px 0px 10px;
}
/* Растягиваем label на всю область блока .file-upload */
.file-upload label {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* стиль текста на кнопке*/
.file-upload span {
font-weight:bold;
}
JavaScript
uploadFile();
function uploadFile(){
var loadFile = document.getElementsByClassName('uploaded-file'),fileName,
spanCl = document.getElementsByClassName('span_cl'), fileSize=0;
for(i=0; i<loadFile.length; i++){
loadFile[i].num = i;
loadFile[i].addEventListener('change',function(){
fileName = this.value.split('\\');
fileName = fileName[fileName.length-1];
fileSize = this.files[0].size;
(fileSize>1048576)?fileSize=( Math.round(fileSize*100/1048576 ) /100).toString()+'MB':fileSize=( Math.round(fileSize*100/1024) /100 ).toString()+'KB';
spanCl[this.num].innerHTML = fileName+' ('+fileSize+')';
},false);
}
}