スタイルフォームの入力ファイルの場合 - 送信ボタンを押してもアップロードできない

Question

コードタイプを使用してファイルタイプの入力を「正常に」スタイリングしました。& Osvaldas Valutisによるカスタマイズチュートリアル。しかし、私が前に使ったこの方法や方法を使って、フォームを提出すると、ファイルはアップロードされません。タイプファイルの入力をそのままにしておくと、動作します。ですから、Submitボタンが画像情報を次のページに処理していない理由はわかりません。スタイリングメソッドを使用して画像をブラウズして選択すると、画像名がボタンに表示されるように表示されます。しかし、送信ボタンをクリックしても画像データは持ち越されません。

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); 

私はスタイリングを取るとき、それは動作しますが、覚えておいてください。しかし、ファイルタイプの入力をスタイルしようとすると、input + labelメソッドが機能します。ファイルデータは、次のページのフォーム送信プロセスによって保存されません。

Answer 1

使用

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