Вопрос:

upload.php не вызывается в AJAX-запросе

php jquery ajax

60 просмотра

2 ответа

504 Репутация автора

Я выбираю изображение, что-то пишу, а затем нажимаю «Отправить». После того, как я нажму «Отправить» сообщения в БД, отобразится индикатор загрузки, НО файл никогда не вызывается.

Вопрос: что не так с моим кодом, что препятствует вызову файла upload.php в action="".

Это работало в определенный момент времени, но я не могу вспомнить, какие изменения я сделал для него.

ОБНОВЛЕННЫЙ СКРИПТ:

$('#feed_form').submit(function(e) {
    var data = new FormData(this);
    var url = $(this).attr("action");
    if($('#file12').val()) {
        $("#progress-div").show("slow");
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "scripts/universal/upload.php",
            data: data,
            processData: false,
            contentType: false,
            success: function() {
                $("#success_post").slideDown();
                setTimeout(function() {
                    $('#success_post').slideUp();
                }, 3000);
            },
            uploadProgress: function (event, position, total, percentComplete){
                $("#progress-bar").width(percentComplete + '%');
                $("#progress-bar").html('<div id="progress-status">' + percentComplete +' %</div>')
            },
            resetForm: true
        });
        return false;
    }
});
<form name="feed_form" id="feed_form" method="post" enctype="multipart/form-data">
    <textarea class="list-group-item p-x-md" id="textarea_writing" name="textarea_writing" style="resize:none;padding:5px;width:100%;" placeholder="What's going on....."></textarea>
    <script type="text/javascript">
        var textarea = document.getElementById("textarea_writing");
        textarea.oninput = function() {
            textarea.style.height = "";
            textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
        };
    </script>
    <span id="show_error_message"></span>
    <br>
    <label class="custom-file" style="width:100%;">
        <input type="file" name="file12" id="file12" class="custom-file-input" onchange="setfilename(this.value);" accept=".jpg, .jpeg, .gif, .png, .mp4" required>
        <span class="custom-file-control">Select photo, video or gif...</span>
    </label>
    <br><br>
    <button type="submit" id="btnSubmitFormClick">Post</button>
</form>

PHP:

  if(!empty($_FILES)) {
        if(is_uploaded_file($_FILES['file12']['tmp_name'])) {
            $sourcePath = $_FILES['file12']['tmp_name'];
            $targetPath = "images/uploads/".$_FILES['file12']['name'];
            move_uploaded_file($sourcePath,$targetPath);
            shell_exec("ffmpeg -f mp4 -i images/uploads/".$_FILES['file12']['name']." -ss 00:00:5.000 -vframes 1 images/uploads/".basename($_FILES['file12']['name'], ".mp4").".png");
           //This line does not affect the code, it works perfectly fine when I try it with some different JS
        }
    }
Автор: JeanPaul98 Источник Размещён: 09.01.2018 06:54

Ответы (2)


1 плюс

1991 Репутация автора

Вы не указали URL в $.ajax(). Может быть, это единственная проблема

Ниже приведен исправленный код, попробуйте его и дайте мне знать, сработало ли это или нет

<script type="text/javascript">
    $(document).ready(function () {
        $('#feed_form').submit(function (e) {
            var url = $(this).attr("action");
            var data = new FormData(this);
            if ($('#file12').val()) {
                if (!$("#btnSubmitFormClick").val()) {
                    $("#show_error_message").innerHTML = "Please write something before clicking submit";
                } else {
                    $("#progress-div").show("slow");
                    e.preventDefault();
                    $.ajax({
                        url: url,
                        data: data,
                        cache: false,
                        processData: false,
                        contentType: false,
                        success: function () {
                            $("#success_post").show();
                        },
                        uploadProgress: function (event, position, total, percentComplete) {
                            $("#progress-bar").width(percentComplete + '%');
                            $("#progress-bar").html('<div id="progress-status">' + percentComplete + ' %</div>')
                        },
                        resetForm: true
                    });
                    return false;
                }
            }
        });
        $("#btnSubmitFormClick").click(function () {
            document.getElementById("close_status_modal").click();
        });
        $("#feed_form").submit(function (e) {
            $.ajax({
                type: "POST",
                url: "scripts/universal/post.php",
                data: $("#feed_form").serialize(), // serializes the form's elements.
                success: function (data) {
                    $('#textarea_writing').val('');
                }
            });
            e.preventDefault(); // avoid to execute the actual submit of the form.
        });
    });
</script>
<form name="feed_form" id="feed_form" action="upload.php" method="post" enctype="multipart/form-data">
    <textarea class="list-group-item p-x-md" id="textarea_writing" name="textarea_writing" style="resize:none;padding:5px;width:100%;" placeholder="What's going on....."></textarea>
    <script type="text/javascript">
        var textarea = document.getElementById("textarea_writing");
        textarea.oninput = function () {
            textarea.style.height = "";
            textarea.style.height = Math.min(textarea.scrollHeight, 300) + "px";
        };
    </script>
    <span id="show_error_message"></span>
    <br>
    <label class="custom-file" style="width:100%;">
        <input type="file" name="file12" id="file12" class="custom-file-input" onchange="setfilename(this.value);" accept=".jpg, .jpeg, .gif, .png, .mp4" required>
        <span class="custom-file-control">Select photo, video or gif...</span>
    </label>
    <br><br>
    <button type="submit" id="btnSubmitFormClick" style="display:none;">Post</button>
</form>
Автор: Shridhar Sharma Размещён: 09.01.2018 06:59

0 плюса

504 Репутация автора

Я решил использовать следующий код для решения моей проблемы:

function _(el) {
    return document.getElementById(el);
}
function uploadFile() {
    var file = _("file12").files[0];
    var formdata = new FormData();
    formdata.append("file12", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.open("POST", "scripts/universal/upload.php");
    ajax.send(formdata);
}
function progressHandler(event) {
    var percent = (event.loaded / event.total) * 100;
    $("#progress-div").show();
    _("progressBar").value = Math.round(percent);
}
function completeHandler(event) {
    _("progressBar").value = 0;
    $("#progress-div").hide();
}
Автор: JeanPaul98 Размещён: 10.01.2018 12:44
32x32