Upload
Per gestire l’up load di uno o più file attraverso l’invio del form.
Upload con lista di file
All’interno di un <form> inserire un campo input di tipo file con classe .upload, seguito da una label il cui attributo for="" deve corrispondere con il name e l’id del campo input.
All’interno di un <form> inserire un campo input di tipo file con classe .upload, seguito da una label il cui attributo for="" deve corrispondere con il name e l’id del campo input.
Ogni elemento può avere tre differenti stati e raltive classi:
.loadingper i file in caricamento.successper i file caricati correttamente.errorin caso di errori
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="upload1" id="upload1" class="upload" multiple="multiple">
<label for="upload1">
<svg role="img" aria-describedby="my-title" class="icon icon-sm" aria-hidden="true">
<title id="my-title">Upload</title><use xlink:href="./dist/svg/sprite.svg#it-upload"></use></svg>
<span>Upload</span>
</label>
<ul class="upload-file-list">
<li class="upload-file success">
<svg role="img" aria-describedby="my-title1" class="icon icon-sm" aria-hidden="true">
<title id="my-title1">File</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
<p>
<span class="sr-only">File caricato:</span>
nome-file-01.pdf <span class="upload-file-weight">68 MB</span>
</p>
<button disabled="">
<span class="sr-only">Caricamento ultimato</span>
<svg role="img" aria-describedby="my-title2" class="icon" aria-hidden="true">
<title id="my-title2">Caricamento ultimato</title><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg>
</button>
</li>
<li class="upload-file success">
<svg role="img" aria-describedby="my-title3" class="icon icon-sm" aria-hidden="true">
<title id="my-title3">File caricato</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
<p>
<span class="sr-only">File caricato:</span>
nome-file-02-nome-file-lungo-per-ellissi.doc <span class="upload-file-weight">68 MB</span>
</p>
<button disabled="">
<span class="sr-only">Caricamento ultimato</span>
<svg role="img" aria-describedby="my-title4" class="icon" aria-hidden="true">
<title id="my-title4">Caricamento ultimato</title><use xlink:href="./dist/svg/sprite.svg#it-check"></use></svg>
</button>
</li>
<li class="upload-file uploading">
<svg role="img" aria-describedby="my-title5" class="icon icon-sm" aria-hidden="true">
<title id="my-title5">Caricamento file</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
<p>
<span class="sr-only">Caricamento file:</span>
nome-file-03.png <span class="upload-file-weight"></span>
</p>
<button>
<span class="sr-only">Annulla caricamento file nome-file-03.png</span>
<svg role="img" aria-describedby="my-title6" class="icon" aria-hidden="true">
<title id="my-title6">Annulla caricamento</title><use xlink:href="./dist/svg/sprite.svg#it-close"></use></svg>
</button>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</li>
<li class="upload-file error">
<svg role="img" aria-describedby="my-title7" class="icon icon-sm" aria-hidden="true">
<title id="my-title7">Errore caricamento file</title><use xlink:href="./dist/svg/sprite.svg#it-file"></use></svg>
<p>
<span class="sr-only">Errore caricamento file:</span>
nome-file-04.jpg <span class="upload-file-weight"></span>
</p>
<button>
<span class="sr-only">Elimina file caricato nome-file-04.jpg</span>
<svg role="img" aria-describedby="my-title8" class="icon" aria-hidden="true">
<title id="my-title8">Elimina file caricato</title><use xlink:href="./dist/svg/sprite.svg#it-close"></use></svg>
</button>
</li>
</ul>
</form>