양식 양식 입력 파일 - 제출 단추가있는 경우 업로드 할 수 없습니다.

Question

코드 유형을 사용하여 파일 형식 입력 스타일을 성공적으로 지정했습니다. & Osvaldas Valutis의 사용자 지정 자습서. 그러나이 방법이나 이전에 사용했던 방법을 사용하면 파일을 업로드하지 않아도 양식을 제출할 수 있습니다. 입력 된 파일을 그대로 놔두면 작동합니다. 그래서 제출 버튼이 이미지 정보를 다음 페이지로 처리하지 않는 이유를 모르겠습니다. 스타일 지정 방법을 사용하여 이미지를 찾아보고 선택할 때 이미지 이름이 단추에 나타나야하는 것처럼 나타납니다. 그러나 제출 버튼을 클릭하면 이미지 데이터가 옮겨지지 않습니다.

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/>