Changer "Choisir un dossier" une fois le fichier sélectioné | upload

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
yromain95@yahoo.com
Messages : 1
Enregistré le : 13 juil. 2018, 18:49

Changer "Choisir un dossier" une fois le fichier sélectioné | upload

Message par yromain95@yahoo.com » 13 juil. 2018, 18:52

Bonjour,



Je souhaiterais créer un petit plus à mon script JS, https://pastebin.com/bKRqAs1T

Code : Tout sélectionner

<script type="text/javascript">
document.querySelector("html").classList.add('js');

var fileInput  = document.querySelector( ".input-file" ),  
    button     = document.querySelector( ".input-file-trigger" ),
    the_return = document.querySelector(".file-return");
      
button.addEventListener( "keydown", function( event ) {  
    if ( event.keyCode == 13 || event.keyCode == 32 ) {  
        fileInput.focus();  
    }  
});
button.addEventListener( "click", function( event ) {
   fileInput.focus();
   return false;
});  
fileInput.addEventListener( "change", function( event ) {  
    the_return.innerHTML = this.value;  
});  </script>
<style>.input-file-container {
  position: relative;
  width: 225px;
} 
.js .input-file-trigger {
  display: block;
  padding: 14px 45px;
  background: #2291e3;
  color: #fff;
  font-size: 1em;
  transition: all .4s;
  cursor: pointer;
}
.js .input-file {
  position: absolute;
  top: 0; left: 0;
  width: 225px;
  opacity: 0;
  padding: 14px 0;
  cursor: pointer;
}
.js .input-file:hover + .input-file-trigger,
.js .input-file:focus + .input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
  background: #3a5269;
  color: #fff;
}

.file-return {
  margin: 0;
}
.file-return:not(:empty) {
  margin: 1em 0;
}
.js .file-return {
  font-style: italic;
  font-size: .9em;
  font-weight: bold;
}
.js .file-return:not(:empty):before {
  content: "Selected file: ";
  font-style: normal;
  font-weight: normal;
}






/* Useless styles, just for demo styles */


}
form {
  width: 225px;
  margin: 0 auto;
  text-align:center;
}
.txtcenter {
  margin-top: 4em;
  font-size: .9em;
  text-align: center;
  color: #aaa;
}
.copy {
  margin-top: 2em;
}
.copy a {
  text-decoration: none;
  color: #1ABC9C;
}</style>
<form method="post" action="action.php" name="formular" enctype="multipart/form-data">
        
        
       <div id="newad_forms">
            <section id="form_part_ads" class="mtm">

    <article class="box-grey-dark">
        <h2 class="title">
            upload
        </h2>
        <div >
            <input type="hidden" name="check_type_diff" />
            
            <div class="grid-2">
                <div><aside class="pictures-list">
	<div>
   <input class="input-file" id="my-file1" type="file" name="monfichier">
		    <label tabindex="0" for="my-file1" class="input-file-trigger">Choisir un fichier...</label>

	</div>
	
    </article>


Je voudrais que quand le fichier à été choisie par l'utilisateur, bas que sa change qu'on puisse voir la différence,

si possible avoir un case qui se coche de ce style en gros. https://goo.gl/images/sSc19v

Sinon juste avoir le nom du fichier qui s'affiche, mais en gros un truc qui peut faire remarquer que le fichier à bien été sélectionné.



Merci de votre aide

Répondre