javascript - precarga - upload file ajax jquery

Cómo subir archivos a través de Jquery/AJAX

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cargar datos y archivos en una forma usando Ajax? 3 respuestas

Actualmente estoy PUBLICANDO mi formulario a través de AJAX con el siguiente código:

$(document).ready(function(){
    $("form#createForm").submit(function() { // loginForm is submitted
        $("form#createForm input#createForm_submit").attr(''disabled'',''disabled'');

        tinyMCE.triggerSave();

        $.ajax({
            type: "POST",
            dataType: "json",
            url: "perform", // URL of the Perl script
            data: $("#createForm").serialize(),

            // script call was successful 
            // data contains the JSON values returned by the Perl script 
            success: function(data){

                $(''div.form-group'').each(function(){
                    $(this).removeClass(''has-error'');
                });

                if (data.error) { // script returned error
                    var myList = $(''ul.msg-list'').empty();

                    $.each(data.msg, function(key,item) {
                        $("div."+key).addClass(''has-error'');
                        $(''<li>'').text(item.errtxt).appendTo(myList);
                    });


                    $(''div#create_createresult'').html(''some error'').html(myList);
                    $(''div#create_createresult'').addClass("text-danger");

                    $("form#createForm input#createForm_submit").removeAttr(''disabled'');
                } // if
                else 
                { // login was successful
                    //$(''form#login_loginform'').hide();
                    $(''div#create_createresult'').text(data.msg);
                    $(''div#create_createresult'').addClass("success");

                } //else
            } // success
        }); // ajax
        $(''div#login_loginresult'').fadeIn();
        return false;
    });
});

Ahora quiero agregar la posibilidad de subir una imagen de la misma forma y simplemente implementarla en esta JQUERY y en la misma secuencia de comandos del lado del servidor. Mi único problema es que no sé cómo hacerlo ... He probado lo anterior y me parece que no pasa la variable $ _FILES a mi script del lado del servidor.

¿Alguien puede guiarme en cualquier dirección, lo que necesito hacer, para agregar la posibilidad de carga de imágenes con este script?

Answer 1

trata de usar esto

// grab your file object from a file input
$(''#fileInput'').change(function () {
  sendFile(this.files[0]);
});

// can also be from a drag-from-desktop drop
$(''dropZone'')[0].ondrop = function (e) {
  e.preventDefault();
  sendFile(e.dataTransfer.files[0]);
};

function sendFile(file) {
  $.ajax({
    type: ''post'',
    url: ''/targeturl?name='' + file.name,
    data: file,
    success: function () {
      // do something
    },
    xhrFields: {
      // add listener to XMLHTTPRequest object directly for progress (jquery doesn''t have this yet)
      onprogress: function (progress) {
        // calculate upload progress
        var percentage = Math.floor((progress.total / progress.totalSize) * 100);
        // log upload progress to console
        console.log(''progress'', percentage);
        if (percentage === 100) {
          console.log(''DONE!'');
        }
      }
    },
    processData: false,
    contentType: file.type
  });
}