Ajax kullanarak veri ve dosyaları tek bir formda mı yüklüyorsunuz?

Veri ve dosya göndermek için formlarım için jQuery ve Ajax kullanıyorum ama nasıl veri ve dosyaları tek bir formda göndermek için emin değilim?

Şu anda her iki yöntemle hemen hemen aynı şeyi yapıyorum, ancak verilerin bir diziye toplanma şekli farklı, verileri kullanıyor .serialize();ancak dosyaları kullanıyor= new FormData($(this)[0]);

Ajax aracılığıyla dosya ve verileri tek bir biçimde yükleyebilmek için her iki yöntemi de birleştirmek mümkün müdür?

Veri jQuery, Ajax ve html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

JQuery, Ajax ve html dosyaları

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Ajax aracılığıyla veri ve dosyaları tek bir formda gönderebilmek için yukarıdakileri nasıl birleştirebilirim?

Amacım Ajax ile tüm bu formları tek bir gönderiye gönderebilmek mümkün mü?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Sahip olduğum sorun yanlış jQuery tanımlayıcı kullanmak oldu.

Sen veri ve dosya yükleyebilir tek biçim ile ajax kullanarak .

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Kısa versiyon

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});

diğer bir seçenek de iframe kullanmak ve formun hedefini ona ayarlamaktır.

bunu deneyebilirsiniz (jQuery kullanır):

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);
        });
    }
}

tüm tarayıcılarda iyi çalışır, verileri serileştirmenize veya hazırlamanıza gerek yoktur. aşağı tarafı ise ilerlemeyi izleyememenizdir.

ayrıca, en azından krom için, istek geliştirici araçlarının "xhr" sekmesinde değil, "doc" altında görünür

ASPT MVC HttpPostedFilebase ile aynı sorunu yaşıyordum ve Gönder üzerinde form kullanmak yerine Ben bazı şeyler yapmak için gerekli tıklayın düğmesini kullanmak gerekiyordu ve sonra tüm Tamam gönderme formu yani burada nasıl çalıştığını

$(".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
        });
    }
});

Bu, MVC modelinizi doğru bir şekilde dolduracak, lütfen Modelinizde, HttpPostedFileBase [] Özelliğinin html'deki giriş denetiminin Adı ile aynı ada sahip olduğundan emin olun.

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

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

Veya daha kısa:

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

Benim enctype: 'multipart/form-data'için Ajax isteğinde alan olmadan çalışmadı . Umarım benzer bir problemde sıkışmış birine yardımcı olur.

enctype Form özniteliğinde zaten ayarlanmış olsa da , bazı nedenlerden dolayı Ajax isteği, enctypeaçık bildirim olmadan otomatik olarak tanımlamadı (jQuery 3.3.1).

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >

     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

Yukarıda belirtildiği gibi, contentTypeve processDataalanlarına da özellikle dikkat edin .

Kod çalışmasını takip etmek benim için

$(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);
});

Eylem Sonrası Yöntemi'nde, parametreyi HttpPostedFileBase UploadFile olarak iletin ve dosya girişinizin Eylem Yöntemi parametrenizde belirtilenle aynı olduğundan emin olun. AJAX Begin formuyla da çalışmalıdır.

Burada, yukarıda belirtilen kodda tanımlanmış çağrıyı yaptığınızdan ve Gereksinim uyarınca koddaki yönteminize başvurabileceğiniz için AJAX BEGIN Formunuzun burada çalışmadığını unutmayın.

Geç cevap verdiğimi biliyorum ama bu benim için işe yaradı

Basit ama daha etkili bir yol:
new FormData()kendisi bir konteyner (veya bir çanta) gibidir. Her şeyi attr veya dosyaya koyabilirsiniz. attribute, file, fileNameÖrneğin eklemeniz gereken tek şey :

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

ve sadece AJAX isteğinde iletin. Örneğin:

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

FormData ile n sayıda dosya veya veri ekleyebilirsiniz.

ve Script.js dosyasından Node.js dosyasında Route dosyasına AJAX İsteği yapıyorsanız , dosyaya (ör. resim, video vb.)
req.bodyerişmek için verilere (örn. metin) erişmek için kullanmaya dikkat edin.
req.files

Benim durumumda, başlık aracılığıyla gönderilen bilgileri ve ayrıca bir FormData nesnesi kullanılarak gönderilen bir dosya vardı bir POST isteği yapmak zorunda kaldı.

Buradaki bazı cevapların bir kombinasyonunu kullanarak çalıştım, bu yüzden temelde çalışmanın sonunda Ajax isteğimde bu beş satır vardı:

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

Burada formData şöyle bir değişken oluşturdu:

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

<form id="form" method="post" action="otherpage.php" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

///// otherpage.php

<?php
    print_r($_FILES);
?>