javascript carga - ¿Cómo puedo subir archivos de forma asíncrona?




la local (25)

Me gustaría subir un archivo de forma asíncrona con jQuery. Este es mi HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

Y aquí mi código Jquery :

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

En lugar de cargar el archivo, solo obtengo el nombre del archivo. ¿Qué puedo hacer para solucionar este problema?

Solución actual

Estoy usando el complemento de formulario de jQuery para cargar archivos.


Answers

Con HTML5 puedes hacer cargas de archivos con Ajax y jQuery. No solo eso, puede hacer validaciones de archivos (nombre, tamaño y tipo MIME) o manejar el evento de progreso con la etiqueta de progreso HTML5 (o un div). Recientemente tuve que hacer un cargador de archivos, pero no quería usar Flash ni Iframes o complementos y, después de algunas investigaciones, encontré la solución.

El HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Primero, puedes hacer alguna validación si quieres. Por ejemplo, en el evento onChange del archivo:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Ahora el Ajax lo envía con el clic del botón:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

Como puede ver, con HTML5 (y algunas investigaciones) la carga de archivos no solo es posible, sino que también es muy fácil. Pruébelo con Google Chrome, ya que algunos de los componentes HTML5 de los ejemplos no están disponibles en todos los navegadores.



Simple Ajax Uploader es otra opción:

https://github.com/LPology/Simple-Ajax-Uploader

  • Navegador cruzado: funciona en IE7 +, Firefox, Chrome, Safari, Opera
  • Admite cargas múltiples y simultáneas, incluso en navegadores que no sean HTML5
  • Sin flash o CSS externo - solo un archivo Javascript de 5Kb
  • Opcional, soporte incorporado para barras de progreso de todos los navegadores (usando la extensión APC de PHP)
  • Flexible y altamente personalizable: use cualquier elemento como botón de carga, diseñe sus propios indicadores de progreso
  • No se requieren formularios, solo proporcione un elemento que sirva como botón de carga
  • Licencia MIT - libre de usar en proyecto comercial

Ejemplo de uso:

var uploader = new ss.SimpleUpload({
    button: $('#uploadBtn'), // upload button
    url: '/uploadhandler', // URL of server-side upload handler
    name: 'userfile', // parameter name of the uploaded file
    onSubmit: function() {
        this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
    },
    onComplete: function(file, response) {
        // do whatever after upload is finished
    }
});

Aquí hay solo otra solución de cómo cargar un archivo ( sin ningún complemento )

Usando Javascripts simples y AJAX (con barra de progreso)

Parte HTML

<form id="upload_form" enctype="multipart/form-data" method="post">
    <input type="file" name="file1" id="file1"><br>
    <input type="button" value="Upload File" onclick="uploadFile()">
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress>
    <h3 id="status"></h3>
    <p id="loaded_n_total"></p>
</form>

Parte de JS

function _(el){
    return document.getElementById(el);
}
function uploadFile(){
    var file = _("file1").files[0];
    // alert(file.name+" | "+file.size+" | "+file.type);
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "file_upload_parser.php");
    ajax.send(formdata);
}
function progressHandler(event){
    _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
    var percent = (event.loaded / event.total) * 100;
    _("progressBar").value = Math.round(percent);
    _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
    _("status").innerHTML = event.target.responseText;
    _("progressBar").value = 0;
}
function errorHandler(event){
    _("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
    _("status").innerHTML = "Upload Aborted";
}

Parte de PHP

<?php
$fileName = $_FILES["file1"]["name"]; // The file name
$fileTmpLoc = $_FILES["file1"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["file1"]["type"]; // The type of file it is
$fileSize = $_FILES["file1"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["file1"]["error"]; // 0 for false... and 1 for true
if (!$fileTmpLoc) { // if file not chosen
    echo "ERROR: Please browse for a file before clicking the upload button.";
    exit();
}
if(move_uploaded_file($fileTmpLoc, "test_uploads/$fileName")){ // assuming the directory name 'test_uploads'
    echo "$fileName upload is complete";
} else {
    echo "move_uploaded_file function failed";
}
?>

Aquí está la aplicación EJEMPLO


Envolviendo para futuros lectores.

Carga asíncrona de archivos

Con HTML5

Puede cargar archivos con jQuery utilizando el método $.ajax() si se admiten FormData y la API de archivos (ambas funciones HTML5).

También puede enviar archivos sin FormData, pero de cualquier manera, la API de archivos debe estar presente para procesar los archivos de manera tal que puedan enviarse con XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Para un ejemplo rápido y puro de JavaScript ( sin jQuery ), consulte " Enviar archivos usando un objeto FormData ".

Retroceder

Cuando HTML5 no es compatible (sin API de archivos ), la única otra solución de JavaScript puro (sin Flash o cualquier otro complemento del navegador) es la técnica de iframe oculto , que permite emular una solicitud asíncrona sin usar el objeto XMLHttpRequest .

Consiste en establecer un iframe como el destino del formulario con las entradas del archivo. Cuando el usuario envía, se realiza una solicitud y los archivos se cargan, pero la respuesta se muestra dentro del iframe en lugar de volver a renderizar la página principal. La ocultación del iframe hace que todo el proceso sea transparente para el usuario y emula una solicitud asíncrona.

Si se hace correctamente, debería funcionar virtualmente en cualquier navegador, pero tiene algunas advertencias sobre cómo obtener la respuesta del iframe.

En este caso, es posible que prefiera utilizar un complemento de envoltorio como Bifröst que use la técnica de iframe pero que también proporcione un transporte jQuery Ajax que le permita enviar archivos con solo el método $.ajax() esta manera:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Complementos

Bifröst es solo un pequeño envoltorio que agrega soporte de respaldo al método ajax de jQuery, pero muchos de los complementos mencionados anteriormente como jQuery Form Plugin o jQuery File Upload incluyen toda la pila de HTML5 a diferentes fallbacks y algunas características útiles para facilitar el proceso. Dependiendo de sus necesidades y requisitos, es posible que desee considerar una implementación simple o cualquiera de estos complementos.


jQuery Uploadify es otro complemento bueno que he usado antes para cargar archivos. El código de JavaScript es tan simple como el siguiente: código. Sin embargo, la nueva versión no funciona en Internet Explorer.

$('#file_upload').uploadify({
    'swf': '/public/js/uploadify.swf',
    'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
    'cancelImg': '/public/images/uploadify-cancel.png',
    'multi': true,
    'onQueueComplete': function (queueData) {
        // ...
    },
    'onUploadStart': function (file) {
        // ...
    }
});

He realizado muchas búsquedas y he llegado a otra solución para cargar archivos sin ningún complemento y solo con ajax. La solución es la siguiente:

$(document).ready(function () {
    $('#btn_Upload').live('click', AjaxFileUpload);
});

function AjaxFileUpload() {
    var fileInput = document.getElementById("#Uploader");
    var file = fileInput.files[0];
    var fd = new FormData();
    fd.append("files", file);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", 'Uploader.ashx');
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
             alert('success');
        }
        else if (uploadResult == 'success')
            alert('error');
    };
    xhr.send(fd);
}

Convierta el archivo a base64 usando | readAsDataURL() HTML5 o algún codificador base64 . Violín aquí

var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            document.getElementById("base64textarea").value = btoa(binaryString);
        };

        reader.readAsBinaryString(file);

Luego para recuperar:

window.open("data:application/octet-stream;base64," + base64);

Un enfoque moderno sin Jquery es usar el objeto FileList del <input type="file">cual el usuario selecciona un archivo (s) y luego usar Fetch para publicar el FileList envuelto en un objeto FormData .

// The input DOM element
const inputElement = document.querySelector('input');

// Listen for a file submit from user
inputElement.addEventListener('change', () => {
    const data = new FormData()
    data.append('file', inputElement.files[0])
    data.append('imageName', 'flower')

    // Post to server
    fetch('/uploadImage', {
        method: 'POST',
        body: data
    })
});

Puedes hacerlo en JavaScript de vainilla con bastante facilidad. Aquí hay un fragmento de mi proyecto actual:

var xhr = new XMLHttpRequest();
xhr.upload.onprogress = function(e) {
    var percent = (e.position/ e.totalSize);
    // Render a pretty progress bar
};
xhr.onreadystatechange = function(e) {
    if(this.readyState === 4) {
        // Handle file upload complete
    }
};
xhr.open('POST', '/upload', true);
xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
xhr.send(file);


Una solución que encontré fue que la <form> apunte a un iFrame oculto. El iFrame puede ejecutar JS para mostrar al usuario que está completo (en la carga de la página).


He estado usando el siguiente script para cargar imágenes que funcionan bien.

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

Explicación

Uso div respuesta para mostrar la animación de carga y la respuesta después de que se haya cargado.

La mejor parte es que puede enviar datos adicionales, como identificadores y etc., con el archivo cuando use este script. Lo he mencionado extra-data como en el guión.

En el nivel de PHP, esto funcionará como carga de archivos normal. Los datos extra se pueden recuperar como datos $_POST .

Aquí no estás usando un plugin y esas cosas. Puedes cambiar el código que quieras. Usted no está codificando a ciegas aquí. Esta es la funcionalidad principal de cualquier carga de archivos jQuery. En realidad Javascript.


Este complemento de jQuery de carga de archivos AJAX carga el archivo en algún lugar y pasa la respuesta a una devolución de llamada, nada más.

  • No depende de HTML específico, solo dele un <input type="file">
  • No requiere que su servidor responda de ninguna manera particular
  • No importa cuántos archivos use, o dónde estén en la página.

- Usar tan poco como -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- o tanto como -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

Puedes usar la nueva API Fetch por JavaScript. Me gusta esto:

function uploadButtonCLicked(){
    var input = document.querySelector('input[type="file"]')

    fetch('/url', {
      method: 'POST',
      body: input.files[0]
    }).then(res => res.json())   // you can do something with response
      .catch(error => console.error('Error:', error))
      .then(response => console.log('Success:', response));
}                               

Ventaja: todos los navegadores modernos admiten de forma nativa la API de recuperación , por lo que no tiene que importar nada. Además, tenga en cuenta que fetch () devuelve una Promise que luego se maneja mediante el uso .then(..code to handle response..)asíncrono.


Para cargar un archivo de forma asíncrona con Jquery, utilice los siguientes pasos:

paso 1 En tu proyecto, abre el administrador de Nuget y agrega un paquete (jquery fileupload (solo necesitas escribirlo en el cuadro de búsqueda, aparecerá e instalarlo).) URL: https://github.com/blueimp/jQuery-File- Subir

paso 2 Agregue los siguientes scripts en los archivos HTML, que ya se agregaron al proyecto ejecutando el paquete anterior:

jquery.ui.widget.js

jquery.iframe-transport.js

jquery.fileupload.js

paso 3 Escribe el control de carga de archivos según el código siguiente:

<input id="upload" name="upload" type="file" />

paso 4 escribe un método js como uploadFile como se muestra a continuación:

 function uploadFile(element) {

            $(element).fileupload({

                dataType: 'json',
                url: '../DocumentUpload/upload',
                autoUpload: true,
                add: function (e, data) {           
                  // write code for implementing, while selecting a file. 
                  // data represents the file data. 
                  //below code triggers the action in mvc controller
                  data.formData =
                                    {
                                     files: data.files[0]
                                    };
                  data.submit();
                },
                done: function (e, data) {          
                   // after file uploaded
                },
                progress: function (e, data) {

                   // progress
                },
                fail: function (e, data) {

                   //fail operation
                },
                stop: function () {

                  code for cancel operation
                }
            });

        };

paso 5 En la función lista, cargue el archivo de elementos para iniciar el proceso como se indica a continuación:

$(document).ready(function()
{
    uploadFile($('#upload'));

});

paso 6 Escribe el controlador MVC y la acción como se muestra a continuación:

public class DocumentUploadController : Controller
    {       

        [System.Web.Mvc.HttpPost]
        public JsonResult upload(ICollection<HttpPostedFileBase> files)
        {
            bool result = false;

            if (files != null || files.Count > 0)
            {
                try
                {
                    foreach (HttpPostedFileBase file in files)
                    {
                        if (file.ContentLength == 0)
                            throw new Exception("Zero length file!");                       
                        else 
                            //code for saving a file

                    }
                }
                catch (Exception)
                {
                    result = false;
                }
            }


            return new JsonResult()
                {
                    Data=result
                };


        }

    }

Puede ver una solución resuelta con una demostración de trabajo here que le permite obtener una vista previa y enviar archivos de formulario al servidor. Para su caso, necesita usar Ajax para facilitar la carga del archivo al servidor:

<from action="" id="formContent" method="post" enctype="multipart/form-data">
    <span>File</span>
    <input type="file" id="file" name="file" size="10"/>
    <input id="uploadbutton" type="button" value="Upload"/>
</form>

Los datos que se envían son un formdata. En su jQuery, use una función de envío de formulario en lugar de hacer clic en un botón para enviar el archivo de formulario como se muestra a continuación.

$(document).ready(function () {
   $("#formContent").submit(function(e){

     e.preventDefault();
     var formdata = new FormData(this);

 $.ajax({
     url: "ajax_upload_image.php",
     type: "POST",
     data: formdata,
     mimeTypes:"multipart/form-data",
     contentType: false,
     cache: false,
     processData: false,
     success: function(){

     alert("successfully submitted");

     });
   });
});

here


Usar HTML5 y JavaScript , cargar asíncrono es bastante fácil, creo la lógica de carga junto con su html, esto no funciona completamente ya que necesita la API, pero demuestra cómo funciona, si tiene el punto final llamado /uploaddesde la raíz de su sitio web Este código debería funcionar para usted:

const asyncFileUpload = () => {
  const fileInput = document.getElementById("file");
  const file = fileInput.files[0];
  const uri = "/upload";
  const xhr = new XMLHttpRequest();
  xhr.upload.onprogress = e => {
    const percentage = e.loaded / e.total;
    console.log(percentage);
  };
  xhr.onreadystatechange = e => {
    if (xhr.readyState === 4 && xhr.status === 200) {
      console.log("file uploaded");
    }
  };
  xhr.open("POST", uri, true);
  xhr.setRequestHeader("X-FileName", file.name);
  xhr.send(file);
}
<form>
  <span>File</span>
  <input type="file" id="file" name="file" size="10" />
  <input onclick="asyncFileUpload()" id="upload" type="button" value="Upload" />
</form>

También más información sobre XMLHttpReques:

El objeto XMLHttpRequest

Todos los navegadores modernos soportan el objeto XMLHttpRequest. El objeto XMLHttpRequest se puede utilizar para intercambiar datos con un servidor web entre bastidores. Esto significa que es posible actualizar partes de una página web, sin volver a cargar toda la página.


Crear un objeto XMLHttpRequest

Todos los navegadores modernos (Chrome, Firefox, IE7 +, Edge, Safari, Opera) tienen un objeto XMLHttpRequest incorporado.

Sintaxis para crear un objeto XMLHttpRequest:

variable = new XMLHttpRequest ();


Acceso a través de dominios

Por razones de seguridad, los navegadores modernos no permiten el acceso entre dominios.

Esto significa que tanto la página web como el archivo XML que intenta cargar, deben estar ubicados en el mismo servidor.

Todos los ejemplos en W3Schools abren archivos XML ubicados en el dominio W3Schools.

Si desea utilizar el ejemplo anterior en una de sus propias páginas web, los archivos XML que cargue deben estar ubicados en su propio servidor.

Para más detalles, puedes seguir leyendo here ...


Recomiendo usar el plugin Fine Uploader para este propósito. Su código de JavaScript sería:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Actualización 2017: todavía depende de los navegadores que usa tu demográfico.

Una cosa importante que se debe entender con el "nuevo" API de file HTML5 es que no se admite hasta IE 10 . Si el mercado específico al que está apuntando tiene una prepensidad superior a la media hacia versiones anteriores de Windows, es posible que no tenga acceso a él.

A partir de 2017, aproximadamente el 5% de los navegadores son uno de IE 6, 7, 8 o 9. Si se dirige a una gran corporación (por ejemplo, esta es una herramienta B2B, o algo que está entregando para capacitación) ese número puede dispararse. Hace solo unos meses, en 2016, traté con una compañía que utiliza IE8 en más del 60% de sus máquinas.

Así que antes de hacer nada: compruebe qué navegador utilizan sus usuarios . Si no lo hace, aprenderá una lección rápida y dolorosa de por qué "funciona para mí" no es lo suficientemente bueno como para entregarlo a un cliente.

Mi respuesta de 2008 sigue.

Sin embargo, existen métodos viables que no son JS para subir archivos. Puedes crear un iframe en la página (que escondes con CSS) y luego dirigir tu formulario para que se publique en ese iframe. La página principal no necesita moverse.

Es una publicación "real", por lo que no es totalmente interactiva. Si necesita un estado, necesita algo del lado del servidor para procesarlo. Esto varía masivamente dependiendo de su servidor. ASP.NET tiene mecanismos más agradables. PHP normal falla, pero puedes usar modificaciones de Perl o Apache para evitarlo.

Si necesita múltiples cargas de archivos, es mejor hacer cada archivo de uno en uno (para superar los límites máximos de carga de archivos). Publique el primer formulario en el iframe, supervise su progreso usando lo anterior y cuando haya terminado, publique el segundo formulario en el iframe, y así sucesivamente.

O utilice una solución Java / Flash. Son mucho más flexibles en lo que pueden hacer con sus publicaciones ...


Puedes usar

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo


Esta es mi solución.

<form enctype="multipart/form-data">    

    <div class="form-group">
        <label class="control-label col-md-2" for="apta_Description">Description</label>
        <div class="col-md-10">
            <input class="form-control text-box single-line" id="apta_Description" name="apta_Description" type="text" value="">
        </div>
    </div>

    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>

y los js

<script>

    $(':button').click(function () {
        var formData = new FormData($('form')[0]);
        $.ajax({
            url: '@Url.Action("Save", "Home")',  
            type: 'POST',                
            success: completeHandler,
            data: formData,
            cache: false,
            contentType: false,
            processData: false
        });
    });    

    function completeHandler() {
        alert(":)");
    }    
</script>

Controlador

[HttpPost]
public ActionResult Save(string apta_Description, HttpPostedFileBase file)
{
    return Json(":)");
}

Nota: esta respuesta no está actualizada, ahora es posible cargar archivos con XHR.

No puede cargar archivos utilizando XMLHttpRequest (Ajax). Puedes simular el efecto usando un iframe o Flash. El excelente complemento de jQuery Form que publica sus archivos a través de un iframe para obtener el efecto.


var formData=new FormData();
formData.append("fieldname","value");
formData.append("image",$('[name="filename"]')[0].files[0]);

$.ajax({
    url:"page.php",
    data:formData,
    type: 'POST',
    dataType:"JSON",
    cache: false,
    contentType: false,
    processData: false,
    success:function(data){ }
});

Puede utilizar los datos del formulario para publicar todos sus valores, incluidas las imágenes.


Ejemplo: Si usa jQuery, puede hacer fácil subir un archivo. Este es un plugin jQuery pequeño y fuerte, http://jquery.malsup.com/form/ .

Ejemplo

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

Espero que sea de ayuda


Vieja pregunta, respuesta moderna. Usando la desestructuración de objetos, una característica ECMAScript 6 , es tan simple como:

const { a, ...rest } = { a: 1, b: 2, c: 3 };

O con la muestra de preguntas:

const myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
const { regex, ...newObject } = myObject;
console.log(newObject);

Puedes verlo en acción en el editor de prueba de Babel.

Editar:

Para reasignar a la misma variable, use un let :

let myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
({ regex, ...myObject } = myObject);
console.log(myObject);




javascript jquery ajax asynchronous upload