Как я могу отправить изображение вместе с другими переменными JavaScript с помощью Ajax от JSON до PHP и получить.? [Дубликат]

У меня была такая же проблема в ASP.Net MVC с HttpPostedFilebase, и вместо использования формы в Submit мне нужно было использовать кнопку на клике, где мне нужно было что-то делать, а затем, если все ОК, отправьте форму, вот как я

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

это будет, чем правильно заполнить вашу модель MVC, пожалуйста, убедитесь, что в вашей модели свойство для HttpPostedFileBase [] имеет то же имя, что и имя элемента управления ввода в html, т. е.

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}

Для меня следующая работа с кодом

  $(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

В вашем методе отправки сообщения передайте параметр как HttpPostedFileBase UploadFile и убедитесь, что ваш входной файл совпадает с указанным в вашем параметре метода действий. Он также должен работать с формой AJAX Begin.

Запомните здесь, что ваша форма AJAX BEGIN не будет работать здесь, поскольку вы делаете свой пост-вызов определенным в коде, упомянутом выше, и вы можете ссылаться на свой метод в коде в соответствии с требованиями

Я знаю, что я отвечаю поздно, но это то, что сработало для меня

другой вариант - использовать iframe и установить для него цель формы.

вы можете попробовать это (он использует jQuery):

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //create a unique iframe for the form
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

он хорошо работает со всеми браузерам, вам не нужно сериализовать или подготовить данные. одна из сторон заключается в том, что вы не можете контролировать ход.

также, по крайней мере, для хрома, запрос не будет отображаться на вкладке «xhr» инструментов разработчика, но в разделе «doc»

Или короче:

$("form#data").submit(function() {
    var formData = new FormData($(this)[0]);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});