顯示和刪除自定義文件輸入的文件名

我有這個工作很好的一點。如果您選擇一個文件，則文件名顯示正確。顯示和刪除自定義文件輸入的文件名

問題出在您刪除文件時輸入不顯示任何內容。

例如：一旦你點擊輸入並選擇一個文件，然後再次點擊輸入並選擇取消。該字段什麼也不顯示。

$('label.file').click(function() { 
 
    $('.wpcf7-file').change(function() { 
 
    var fileinput = jQuery('label.file').find('span.wpcf7-form-control-wrap'); 
 
    var filename = jQuery(this).val().split('\\').pop(); 
 
    $('label.file').html('<div class="input-value">' + filename + '</div>'); 
 
    $('label.file').prepend(fileinput); 
 
    }); 
 
})

input[type="file"] { 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    visibility: hidden; 
 
} 
 

 
label.file { 
 
    border-radius: 20px; 
 
    border: none; 
 
    padding: 5px 18px; 
 
    margin: 0 auto 20px; 
 
    color: #888; 
 
    background: #fff; 
 
    width: calc(95% - 6px); 
 
    font-family: Open Sans; 
 
    width: 95%; 
 
    margin: 5px auto; 
 
    text-align: left; 
 
    display: block; 
 
    border: solid 1px grey; 
 
} 
 

 
.input-value { 
 
    position: relative; 
 
    top: 0; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="wpcf7-form-control-wrap"> 
 
<label class="file">Choose a file... 
 
<span class="wpcf7-form-control-wrap file-70"> 
 
<input name="file-70" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" type="file"> 
 
</span> 
 
</label> 
 
</span>

來源

2017-04-04 Aaron

火狐顯示先前選擇的文件。你正在測試哪個瀏覽器？ – julekgwa

這個問題是關於谷歌鉻，在Firefox上工作正常。 – julekgwa

@julekgwa對不起，我應該添加瀏覽器遇到問題。 – Aaron

檢查filename爲空。

$('label.file').click(function() { 
 
    $('.wpcf7-file').change(function() { 
 
    var fileinput = jQuery('label.file').find('span.wpcf7-form-control-wrap'); 
 
    var filename = jQuery(this).val().split('\\').pop(); 
 
    if(filename !='') 
 
    $('label.file').html('<div class="input-value">' + filename + '</div>'); 
 
    $('label.file').prepend(fileinput); 
 
    }); 
 
})

input[type="file"] { 
 
    position: absolute; 
 
    height: 0; 
 
    width: 0; 
 
    visibility: hidden; 
 
} 
 

 
label.file { 
 
    border-radius: 20px; 
 
    border: none; 
 
    padding: 5px 18px; 
 
    margin: 0 auto 20px; 
 
    color: #888; 
 
    background: #fff; 
 
    width: calc(95% - 6px); 
 
    font-family: Open Sans; 
 
    width: 95%; 
 
    margin: 5px auto; 
 
    text-align: left; 
 
    display: block; 
 
    border: solid 1px grey; 
 
} 
 

 
.input-value { 
 
    position: relative; 
 
    top: 0; 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="wpcf7-form-control-wrap"> 
 
<label class="file">Choose a file... 
 
<span class="wpcf7-form-control-wrap file-70"> 
 
<input name="file-70" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false" type="file"> 
 
</span> 
 
</label> 
 
</span>

來源

2017-04-04 09:12:40

完美，謝謝。 – Aaron

很高興幫助:) –

顯示和刪除自定義文件輸入的文件名

回答

相關問題