paginas - funcion load javascript

¿Cargar datos y archivos de una forma usando Ajax?

Question

Estoy usando jQuery y Ajax para que mis formularios envíen datos y archivos, pero no estoy seguro de cómo enviar los datos y archivos de una forma

Actualmente hago casi lo mismo con ambos métodos, pero la forma en que los datos se reúnen en una matriz es diferente, los datos utilizan .serialize(); pero los archivos usan = new FormData($(this)[0]);

¿Es posible combinar ambos métodos para poder cargar archivos y datos de una forma a través de Ajax?

Datos jQuery, Ajax y 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>

Archivos jQuery, Ajax y 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>

¿Cómo puedo combinar lo anterior para poder enviar datos y archivos de una forma a través de Ajax?

Mi objetivo es poder enviar todo este formulario en una publicación con Ajax, ¿es posible?

<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>

Answer 1

El problema que tuve fue usar el identificador de jQuery incorrecto.

Puede cargar datos y archivos de una forma usando ajax .

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

Version corta

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

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

Answer 2

O más corto:

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

Answer 3

Para mi siguiente trabajo de código

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

En su Método de publicación de acciones, pase el parámetro como HttpPostedFileBase UploadFile y asegúrese de que la entrada de su archivo sea la misma que se menciona en su parámetro del Método de acción. También debería funcionar con la forma de inicio de AJAX.

Recuerde aquí que su Formulario AJAX BEGIN no funcionará aquí ya que hace su llamada posterior definida en el código mencionado anteriormente y puede hacer referencia a su método en el código según el Requisito

Sé que estoy respondiendo tarde pero esto es lo que funcionó para mí

Answer 4

Tenía este mismo problema en ASP.Net MVC con HttpPostedFilebase y en lugar de usar el formulario en Enviar, necesitaba usar el botón en el lugar en el que tenía que hacer algunas cosas y luego, si todo está bien, enviar el formulario, así es como funcionó.

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

Esto completará correctamente su modelo MVC, asegúrese de que en su Modelo, la Propiedad para HttpPostedFileBase [] tenga el mismo nombre que el Nombre del control de entrada en HTML.

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

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

Answer 5

otra opción es usar un iframe y establecer el objetivo del formulario.

Puedes probar esto (usa 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);
        });
    }
}

funciona bien con todos los navegadores, no necesita serializar o preparar los datos. Un inconveniente es que no puedes monitorear el progreso.

Además, al menos para Chrome, la solicitud no aparecerá en la pestaña "xhr" de las herramientas del desarrollador, sino en "doc"

Answer 6

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