如何获取输入文件的文件名并在按钮点击时再次显示它而不上传？

I am having a hard time thinking on what I need to do to achieve my goals.

Goals:
1. To copy the filename of the file I want to upload and display it when I click on a button but NOT upload it.
2. To be able to upload it when the Submit button is clicked.

Steps:

Step 1: I will choose a file to upload. So I will click on Choose File. enter image description here

Step 2: Now it should show the name of the file I've chosen on Step 1. Then, I will click on "Next". enter image description here

Step 3: Clicking "Next" will only display what's in Step 2 but it's grayed-out and instead of a Next button, there is a "Submit" button. It's like a confirmation if I am sure to upload the file. When I click on "Submit", that's the only time the file gets uploaded.
enter image description here

So I need to be able get Step 3. I don't know how though. :'( .
I am using PHP and JS on this.

I am not sure if my question is correct. Feel free to provide corrections as well.

Any help would be very very much appreciated. Thanks so much!!!

Here is a quick snippet to, hopefully, get you going:

<body>

    <input type="file" name="upload" id="upload">
    <div id="filename"></div>    

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val()); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val();
        // .. do your magic

        $('#filename').html(filename);
    });

    </script>
 </body>

This will output something like: C:\fakepath\Screenshot_2015-56-03_12-56.JPG in Opera, absolute path to file in IE 11 like C:\users\foo\Desktop\file.jpg

You can further manipulate value of the file input field to isolate filename only using regex etc.