当我为表单输入文件设置样式时 - 使用提交按钮时无法上传

Question

我已经使用 Osvaldas Valutis 的 codeDrops 样式和自定义教程“成功地”设置了我的文件类型输入的样式。但是使用这种方法或我之前使用过的任何方法，当我提交表单时，文件不会上传。当我保持类型文件输入不变时，它可以工作。所以我不知道为什么提交按钮没有将图像信息处理到下一页。当您使用样式方法浏览和选择图像时，图像名称将按应有的方式显示在按钮中。但是点击提交按钮时不会携带图片数据。

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

请记住，当我取消样式时，它会起作用。但是当我尝试设置文件类型输入的样式时，输入+标签方法有效；但是文件数据不会通过下一页的表单提交过程得到保留。

Answer 1

使用

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