Print the filename of the inputted file without refreshing the page

Viewed 25

I'm trying to display the filename of the file that I submitted without refreshing the page using JQUERY, AJAX and PHP. But for some reason, it is not displaying.

Here's my HTML form

<form>
    <input type="file" id="stegoImage" name="stegoImage">   
</form>
<button type="button" id="desteganize" name="desteganize">DESTEGANIZE</button>
<div id="result"></div>

Here's my JQuery and AJAX

$(document).ready(function(){
    $('#desteganize').click(function(){
        var stegoImage = $("#stegoImage").prop("files")[0];
        var form = new formData();
        form.append("stegoImage", stegoImage);
        $.ajax({
            url: 'process.php',
            type: 'POST',
            data: form,
            contentType: false,
            processData:false,
            success:function(result){
                $("#result").html(result);
            }
        })
    });
});

And Here's my PHP code (process.php)

$filename = $_FILES['stegoImage']['name'];
echo $filename;
1 Answers

$(document).ready(function() {
            $('input[type="file"]').change(function(e) {
                var fname = e.target.files[0].name;
                $("h4").text(fname);

            });
        });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<input type="file">
<h4></h4>

Related