I dont get temp name of image upload using php,ajax

Question

I want to get the temp name of image upload using php and ajax.I got the file name of upolad image. But dont get the temp name of image upload.My code is given below

main.php

<form action=" " method="POST" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File Upload</label>
        <input type="file" name="file" id="file" size="150">
        <p class="help-block">Only Excel/CSV File Import.</p>
    </div>
    <button type="button" class="btn btn-default"
            name="Import" value="Import" onclick="file_up()">
        Upload</button>
</form>
<div id="upload_show"></div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
    function file_up() {
        var file = $('#file').val();
        $.ajax({
            type: "POST",
            url: 'first_ajax.php',
            data: 'file=' + file,
            success: function (msg){
                $("#upload_show").html(msg);
            }
        });
    }
</script>

first_ajax.php

<?php
   echo $file1 = $_POST['file'];   // for get file name
   echo $file1 = $_POST['file']['tmp_name']; //for get temp name
?>

Answer 1

Instead of,
var file = $('#file').val();

try,
var file = $("#file").prop("files")[0];

Answer 2

Use FormData to get $_FILES and $_POST array in AJAX file...

function file_up() {
 var formData = new FormData($('#form')[0]);
                    $.ajax({
                        url: 'first_ajax.php',
                        type: 'POST',
                        data: formData,
                        async: false,
                        success: function(data) {
                            $("#upload_show").html(msg);
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                }