php - 使用输入字段(类型文件)选择图像后更改文本

Question

我这里有代码:

.upload-button{
    text-align: center;
    position:relative;
    width: 402px;
    word-wrap: break-word;
    border: 2px solid #037CA9;
    background-color: #131214;
    color: white;
    padding: 15px 0;
    display: inline-block;
    margin-bottom: 15px;
}

.upload-button:hover{
    text-decoration: underline;
}

input[type="file"]{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    cursor:pointer;
}

<div class="upload-button">
        Bild auswählen
        <input type="file" name="fileToUpload" id="fileToUpload">
</div>

现在我想更改框内的文本，如果有人选择了图像。我想看文件名。我怎么能意识到这样的事情？我需要 Javascript 吗？

Answer 1

您可以使用 this.files[0] 变量:

$("document").ready(function(){
    $('#fileToUpload').on('change', function(e){
        var file = this.files[0];
        $("#output").html('last modified: ' + file.lastModifiedDate + '<br>Name: '+file.name+'<br>Size: '+file.size+'<br>Type: '+file.type);
        $('.upload-button').html('Upload ' + file.name);
    });
});

.upload-button{
    text-align: center;
    position:relative;
    width: 402px;
    word-wrap: break-word;
    border: 2px solid #037CA9;
    background-color: #131214;
    color: white;
    padding: 15px 0;
    display: inline-block;
    margin-bottom: 15px;
}

.upload-button:hover{
    text-decoration: underline;
}

input[type="file"]{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="upload-button">
        Bild auswählen
        <input type="file" name="fileToUpload" id="fileToUpload">
</div>
    
    <div id="output">
        
    </div>