javascript - enviar - jquery new formdata this



Como enviar objetos FormData com solicitações Ajax em jQuery? (6)

A melhor documentação e exemplo que encontrei foi aqui https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

https://src-bin.com

Esta questão já tem uma resposta aqui:

O padrão XMLHttpRequest Nível 2 (ainda um rascunho de trabalho) define a interface FormData . Essa interface permite anexar objetos File a solicitações XHR (solicitações Ajax).

Btw, este é um novo recurso - no passado, o "escondido-iframe-trick" foi usado (leia sobre isso na minha outra pergunta ).

É assim que funciona (exemplo): 

var xhr = new XMLHttpRequest(),
    fd = new FormData();

fd.append( 'file', input.files[0] );
xhr.open( 'POST', 'http://example.com/script.php', true );
xhr.onreadystatechange = handler;
xhr.send( fd );

onde input é um campo <input type="file"> , e handler é o manipulador de sucesso para o pedido Ajax.

Isso funciona lindamente em todos os navegadores (novamente, exceto o IE).

Agora, gostaria de fazer essa funcionalidade funcionar com o jQuery. Eu tentei isso: 

var fd = new FormData();    
fd.append( 'file', input.files[0] );

$.post( 'http://example.com/script.php', fd, handler );

Infelizmente, isso não funcionará (um erro de "invocação ilegal" é lançado - a captura de tela está aqui ). Eu suponho que o jQuery espera um objeto simples de valor-chave representando nomes / valores de campos de formulário, e a instância de FormData que estou passando é aparentemente incompatível.

Agora, como é possível passar uma instância de FormData para xhr.send() , espero que também seja possível fazê-lo funcionar com jQuery.

Atualizar:

Eu criei um "ticket de recurso" no Bug Tracker do jQuery. Está aqui: http://bugs.jquery.com/ticket/9995

Eu fui sugerido para usar um "prefilter Ajax" ...

Atualizar:

Primeiro, deixe-me dar uma demonstração demonstrando qual comportamento eu gostaria de alcançar.

HTML: 

<form>
    <input type="file" id="file" name="file">
    <input type="submit">
</form>

JavaScript: 

$( 'form' ).submit(function ( e ) {
    var data, xhr;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    xhr = new XMLHttpRequest();

    xhr.open( 'POST', 'http://hacheck.tel.fer.hr/xml.pl', true );
    xhr.onreadystatechange = function ( response ) {};
    xhr.send( data );

    e.preventDefault();
});

O código acima resulta nesta solicitação HTTP:

Isso é o que eu preciso - eu quero esse tipo de conteúdo "multipart / form-data"!

A solução proposta seria assim: 

$( 'form' ).submit(function ( e ) {
    var data;

    data = new FormData();
    data.append( 'file', $( '#file' )[0].files[0] );

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',
        success: function ( data ) {
            alert( data );
        }
    });

    e.preventDefault();
});

No entanto, isso resulta em:

Como você pode ver, o tipo de conteúdo está errado ...

Answer #1

Em vez de - fd.append( 'userfile', $('#userfile')[0].files[0]);

Use - fd.append( 'file', $('#userfile')[0].files[0]);

Answer #2

Eu faço assim e é trabalho para mim, espero que isso ajude :) 

   <div id="data">
        <form>
            <input type="file" name="userfile" id="userfile" size="20" />
            <br /><br />
            <input type="button" id="upload" value="upload" />
        </form>
    </div>
  <script>
        $(document).ready(function(){
                $('#upload').click(function(){

                    console.log('upload button clicked!')
                    var fd = new FormData();    
                    fd.append( 'userfile', $('#userfile')[0].files[0]);

                    $.ajax({
                      url: 'upload/do_upload',
                      data: fd,
                      processData: false,
                      contentType: false,
                      type: 'POST',
                      success: function(data){
                        console.log('upload success!')
                        $('#data').empty();
                        $('#data').append(data);

                      }
                    });
                });
        });
    </script>
Answer #3

Existem algumas técnicas ainda a serem mencionadas disponíveis para você. Comece com a configuração da propriedade contentType em seus parâmetros do ajax.

Com base no exemplo da pradeek: 

$('form').submit(function (e) {
    var data;

    data = new FormData();
    data.append('file', $('#file')[0].files[0]);

    $.ajax({
        url: 'http://hacheck.tel.fer.hr/xml.pl',
        data: data,
        processData: false,
        type: 'POST',

        // This will override the content type header, 
        // regardless of whether content is actually sent.
        // Defaults to 'application/x-www-form-urlencoded'
        contentType: 'multipart/form-data', 

        //Before 1.5.1 you had to do this:
        beforeSend: function (x) {
            if (x && x.overrideMimeType) {
                x.overrideMimeType("multipart/form-data");
            }
        },
        // Now you should be able to do this:
        mimeType: 'multipart/form-data',    //Property added in 1.5.1

        success: function (data) {
            alert(data);
        }
    });

    e.preventDefault();
});

Em alguns casos, ao forçar o ajax do jQuery a fazer coisas não esperadas, o evento beforeSend é um ótimo lugar para fazê-lo. Por um tempo as pessoas estavam usando beforeSend para substituir o mimeType antes que ele fosse incluído no jQuery no 1.5.1. Você deve ser capaz de modificar praticamente qualquer coisa no objeto jqXHR no evento before send.

Answer #4

Se você quiser enviar arquivos usando o ajax, use "jquery.form.js". Isso envia todos os elementos do formulário facilmente.

Amostras http://jquery.malsup.com/form/#ajaxSubmit

visão áspera: 

<form id='AddPhotoForm' method='post' action='../photo/admin_save_photo.php' enctype='multipart/form-data'>


<script type="text/javascript">
function showResponseAfterAddPhoto(responseText, statusText)
{ 
    information= responseText;
    callAjaxtolist();
    $("#AddPhotoForm").resetForm();
    $("#photo_msg").html('<div class="album_msg">Photo uploaded Successfully...</div>');        
};

$(document).ready(function(){
    $('.add_new_photo_div').live('click',function(){
            var options = {success:showResponseAfterAddPhoto};  
            $("#AddPhotoForm").ajaxSubmit(options);
        });
});
</script>
Answer #5

Você pode enviar o objeto FormData em uma solicitação ajax usando o seguinte código, 

$("form#formElement").submit(function(){
    var formData = new FormData($(this)[0]);
});

Isso é muito semelhante à resposta aceita, mas uma resposta real para o tópico da pergunta. Isso enviará os elementos do formulário automaticamente no FormData e você não precisará anexar manualmente os dados à variável FormData.

O método ajax se parece com isso, 

$("form#formElement").submit(function(){
    var formData = new FormData($(this)[0]);
    //append some non-form data also
    formData.append('other_data',$("#someInputData").val());
    $.ajax({
        type: "POST",
        url: postDataUrl,
        data: formData,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function(data, textStatus, jqXHR) {
           //process data
        },
        error: function(data, textStatus, jqXHR) {
           //process error msg
        },
});

Você também pode passar manualmente o elemento de formulário dentro do objeto FormData como um parâmetro como este 

var formElem = $("#formId");
var formdata = new FormData(form[0]);

Espero que ajude. ;)




new   formdata   form   enviar   data   arquivo   javascript   jquery   ajax   html5   multipartform-data  


multipartform-data