Ajax Php Загрузка изображений и сохранение

Question

Я хочу загрузить изображение и сохранить его в папке загрузки без обновления страницы. Кроме того, я также хочу отобразить загруженное изображение на экране в div. Однако, когда я запускаю код, когда я пытаюсь загрузить изображение, текст продолжает говорить «Загрузка изображения ...» и никогда не завершает фактическую загрузку. Поэтому изображение никогда не отображается на странице. Кроме того, у меня возникают проблемы с сохранением моего изображения в папке загрузки, поэтому кто-то может указать мне правильное направление? Спасибо!

ОБНОВЛЕНИЕ: Ajax POST получает ошибку каждый раз, когда я пытаюсь загрузить изображение. На самом деле, запрос POST может даже не достигнуть моего файла upload.php. Я пытаюсь предупредить себя, когда запрос на самом деле достигает upload.php, но ничего не распечатывается. Каковы могут быть потенциальные причины этого?

ОБНОВЛЕНИЕ № 2: Я включил изображение макета моего файла. У меня есть HTML и Javascript в privatecreate.blade.php и Javascript в upload.php. Я хочу сохранить изображения в папке загрузки.

Обновление № 3: Я распечатал ошибку AJAX, и это "Не указан входной файл"

Пожалуйста, потерпите всех. Это мой первый опыт работы с php и sql, и я очень стараюсь учиться.

HTML:

 <div class="container" style="width:700px;">
                                        <br />
                                        <label>Select Image</label>
                                        <input type="file" name="file" id="file" />
                                        <br />
                                        <span id="uploaded_image"></span>
                                    </div>

Javascript:

 $(document).ready(function(){
    $(document).on('change', '#file', function(){
        var name = document.getElementById("file").files[0].name;
        var form_data = new FormData();
        var ext = name.split('.').pop().toLowerCase();

        if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1)
        {
            alert("Invalid Image File");
        }
        else{
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("file").files[0]);
            var f = document.getElementById("file").files[0];
            var fsize = f.size||f.fileSize;
            if(fsize > 2000000)
            {
                alert("Image File Size is very big");
            }
            else
            {
                form_data.append("file", document.getElementById('file').files[0]);
                $.ajax({
                    url:"upload.php",
                    method:"POST",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    processData: false,
                    beforeSend:function(){
                        $('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
                    },
                    success:function(data)
                    {
                        $('#uploaded_image').html(data);
                    }
                    ,error: function(ts)
                    {
                        alert("error:" + ts.responseText);
                    }
                });
            }
        }
    });
});

PHP (upload.php):

<?php
//upload.php
$message = "Running Upload.php";
echo "<script type='text/javascript'>alert('$message');</script>";
if($_FILES["file"]["name"] != '')
{
    $test = explode('.', $_FILES["file"]["name"]);
    $ext = end($test);
    $name = rand(100, 999) . '.' . $ext;
    $location = 'uploads/' . $name;
    move_uploaded_file($_FILES["file"]["tmp_name"], $location);
    echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
}
?>

Answer 1

<?php
//Change your location path
if($_FILES["file"]["name"] != '')
{
    $test = explode('.', $_FILES["file"]["name"]);
    $ext = end($test);
    $name = rand(100, 999) . '.' . $ext;
    $location = 'upload/' . $name; // change here & enjoy
    move_uploaded_file($_FILES["file"]["tmp_name"], $location);
    echo '<img src="'.$location.'" height="150" width="225" class="img-thumbnail" />';
}
?>