Int�gration Custom Input File
Bonjour,
J'utilise wordpress, et j'aimerai configur� un bouton de type:file. J'ai suivis un petit tuto avec http://tympanus.net/codrops/2015/09/...uts-smart-way/.
Tout fonctionne parfaitement, j'ai juste un probl�me pour l'affichage du nom du fichier s�lectionn� (le nom du fichier remplace pas le texte entre la balise span). Donc surement un soucis avec la partie JS que je ne comprend pas tr�s bien, je l'avoue que j'ai juste fait un copier coller.
Le code JS est directement int�gr� dans la page pour �tre s�r que j'ai pas de probl�me avec le lien de direction vers le fichier.
Je pense plut�t que �� doit �tre un probl�me du c�t� de la ligne
Code:
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
Mais je comprend pas trop cette ligne. Si quelqu'un peut m'�clairer, ce serrai sympas ^^
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <script>(function(e,t,n){var r=e.querySelectorAll("html")[0];r.className=r.className.replace(/(^|\s)no-js(\s|$)/,"$1js$2")})(document,window,0);</script>
<script type="text/javascript">
'use strict';
;( function ( document, window, index )
{
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 = e.target.value.split( '\\' ).pop();
if( fileName )
label.querySelector( 'span' ).innerHTML = fileName;
else
label.innerHTML = labelVal;
});
// Firefox bug fix
input.addEventListener( 'focus', function(){ input.classList.add( 'has-focus' ); });
input.addEventListener( 'blur', function(){ input.classList.remove( 'has-focus' ); });
});
}
( document, window, 0 ));
</script> |
La partie du formulaire :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <input class="form-control <?php if ( ! empty( $errors ) ) : ?>field-error-input<?php endif; ?> field-input inputfile inputfile-1"
<?php if ( ! empty( $required ) ) : ?>required aria-required="true"<?php endif; ?>
type="file"
name="file-1[]"
id="ccf_field_<?php echo esc_attr( $slug ); ?>"
placeholder="<?php echo esc_attr( $placeholder ); ?>"
value="<?php if ( ! empty( $post_value ) ) { echo esc_attr( $post_value ); } else { echo esc_attr( $value ); } ?>"
accept="<?php echo esc_attr( preg_replace( '/([^,\s]+)/', '.$1', $file_extensions ) ); ?>"
data-multiple-caption="{count} files selected">
<label for="ccf_field_<?php echo esc_attr( $slug ); ?>">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" >
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg>
<span>Choose a file…</span>
<?php if ( ! empty( $required ) ) : ?><?php endif; ?>
</label> |
Le code CSS, n'est pas utile pour mon probl�me.
Merci d'avance pour votre aide. :)
