web-gelistirme-sc.com

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

Formlarımın veri ve dosyaları göndermesi için jQuery ve Ajax kullanıyorum, ancak hem veri hem de dosyaları tek bir formda nasıl göndereceğimi bilmiyorum?

Şu anda neredeyse her iki yöntemle de aynı şeyi yapıyorum ancak verilerin bir dizide toplanma şekli farklıdır, veriler .serialize(); işlevini kullanır, ancak dosyalar = new FormData($(this)[0]); işlevini kullanır

Ajax ile dosya ve verileri tek bir formda yükleyebilmek için her iki yöntemi de birleştirmek mümkün mü?

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>

Dosyalar jQuery, Ajax ve html

$("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>

Yukarıdakileri nasıl birleştirebilirim, böylece veri ve dosyaları Ajax ile bir biçimde gönderebilirim?

Amacım tüm bu formları Ajax ile bir posta ile 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>
325
Dan

Sahip olduğum sorun yanlış jQuery tanımlayıcısını kullanmaktı.

Siz veri ve dosyaları yükleyebilirsiniz bir formla 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);
    });
});
409
Dan

başka bir seçenek bir 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 seri hale getirmenize veya hazırlamanıza gerek kalmaz .. ... bir tarafı, ilerlemeyi izleyemezsiniz.

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

30
Roey

Veya daha kısa:

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

Bu aynı sorunu ASP.Net MVC'de HttpPostedFilebase ile yapıyordum ve Gönder formunu kullanmak yerine bazı şeyleri yapmam gereken yeri tıklamak için düğmeyi kullanmam gerekiyordu ve sonra tüm tamam formları bu yüzden nasıl çalışıyor

$(".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 yerleştirmekten daha fazla olacaktır, lütfen Modelinizde HttpPostedFileBase [] 'ın Html i.e içindeki giriş kontrolünün Name ile aynı ada sahip olduğundan emin olun.

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

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

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

enctypezaten form özniteliğinde ayarlanmış olsa bile, Ajax isteği, açıkça bildirilmeden enctype öğesini otomatik olarak tanımlamamıştır (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>

Diğerlerinin yukarıda da belirtildiği gibi, lütfen contentType ve processData alanlarına da özellikle dikkat edin.

0
Adithya Upadhya

Benim için kod çalışmasını takip etmek 

  $(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 belirtildiği şekilde olduğundan emin olun. AJAX Begin formuyla da çalışmalı. 

Unutmayın ki, AJAX BEGIN Formunuz, yukarıda belirtilen kodda tanımlanmış çağrıyı yaptığınızdan ve yönteminize koda göre gereksiniminize göre başvuruda bulunabildiğiniz için burada çalışmayacak

Geç cevap verdiğimi biliyorum ama bu benim için çalıştı.

0
   <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);
?>
0
Shailesh Dwivedi