حساب
در حال دریافت فهرست آموزشها…
با استفاده از jquery css قصد تغیر شکل ظاهری input file در html را داریم. خروجی نهایی : https://codepen.io/sajjadintel/pen/RLWjJP
<div>
<input multiple="multiple" name="resume" class="inputFile" type="file" id="resume" data-multiple-caption="{count} فایل انتخاب شده" >
<label for="resume"><span>ارسال فایل</span></label>
</div>
/* برای حذف دکمه پیش فرض input */
.inputFile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
/* استایل برای دکمه input جدید */
.inputFile + label {
font-size: 1.25em;
font-weight: 700;
color: #fff;
background-color: #188aaa;
display: inline-block;
padding: 3pt 7pt 3pt 7pt;
-webkit-border-radius:50pt;
-moz-border-radius:50pt;
border-radius:50pt;
}var inputs = document.querySelectorAll( '.inputFile' );
Array.prototype.forEach.call( inputs, function( input ) {
var label = input.nextElementSibling,
labelVal = label.innerHTML;
input.addEventListener( 'change', function( e ) {
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', 'یک' );
label.querySelector( 'span' ).innerHTML = fileName;
});
});