Quand je forme le fichier d'entrée de formulaire - Je n'arrive pas à télécharger quand avec le bouton Soumettre

Question

J'ai "avec succès" stylisé mon type de fichier en utilisant codeDrops Styling & Didacticiel de personnalisation par Osvaldas Valutis. Mais en utilisant cette méthode ou n'importe quelle méthode que j'ai utilisée auparavant, lorsque je soumets le formulaire, le fichier ne télécharge pas. Quand je laisse l'entrée de fichier de type intacte, cela fonctionne. Donc, je ne sais pas pourquoi le bouton Soumettre ne traite pas les informations de l'image à la page suivante. Lorsque vous parcourez et choisissez une image en utilisant les méthodes de style, le nom de l'image apparaît comme il se doit dans le bouton. Mais le bouton Soumettre lorsque vous cliquez ne transmettra pas les données d'image.

HTML:

<form action="exifdata.php" name="myForm" method="post" enctype="multipart/form-data" id="upload_form"> 
<div class="box1"> 
<input type="file" name="file-1" id="file-1" class="inputfile inputfile-1" accept="image/*" /> 
<label for="file-1"><span>Choose Your Photo&hellip;</span></label> 
</div> 
<input type="submit" value="Upload For Editing" id="submit-btn" onClick="validateForm();"/><br/><br/> 
</form> 

CSS:

.inputfile { 
    width: 0.1px; 
    height: 0.1px; 
    opacity: 0; 
    overflow: hidden; 
    position: absolute; 
    z-index: -1; 
} 
.box1 { 
    width: 100%; 
    text-align: center; 
} 
.inputfile + label { 
    font-size: 1.25em; 
    color: white; 
    font-weight: 700; 
    background-color: #3a58a6; 
    display: inline-block; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
    float: none; 
    height: 35px; 
    width: 230px; 
    padding: 5px; 
    border: thin solid gray; 
    border-radius: 10px; 
    box-shadow: 3px 3px 3px gray; 
    text-decoration: none; 
} 
.inputfile:focus + label, 
.inputfile + label:hover { 
    background-color: #eedb02; 
    box-shadow: 1px 1px 2px gray; 
    color: black; 
} 
.inputfile + label { 
    cursor: pointer; /* "hand" cursor */ 
} 
.inputfile:focus + label { 
    outline: 1px dotted #000; 
    outline: -webkit-focus-ring-color auto 5px; 
} 
.inputfile + label * { 
    pointer-events: none; 
} 

JAVASCRIPT:

'use strict'; 

;(function($, window, document, undefined) 
{ 
    $('.inputfile').each(function() 
    { 
     var $input = $(this), 
      $label = $input.next('label'), 
      labelVal = $label.html(); 

     $input.on('change', function(e) 
     { 
      var fileName = ''; 

      if(this.files && this.files.length > 1) 
       fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length); 
      else if(e.target.value) 
       fileName = e.target.value.split('\\').pop(); 

      if(fileName) 
       $label.find('span').html(fileName); 
      else 
       $label.html(labelVal); 
     }); 

     // Firefox bug fix 
     $input 
     .on('focus', function(){ $input.addClass('has-focus'); }) 
     .on('blur', function(){ $input.removeClass('has-focus'); }); 
    }); 
})(jQuery, window, document); 

Rappelez-vous, quand j'enlève le style, cela fonctionne. Mais quand j'essaye de styler une entrée de type de fichier, la méthode d'entrée + étiquette fonctionne; mais les données du fichier ne sont pas conservées via le processus de soumission du formulaire pour la page suivante.

Answer 1

Utilisez

<button type="submit" value="Upload For Editing" id="submit-btn" onClick="validateForm();"/><br/><br/>