Pregunta jQuery Ajax Subida de archivos


¿Puedo usar el siguiente código jQuery para realizar la carga de archivos utilizando el método de publicación de una solicitud Ajax?

$.ajax({
    type: "POST",
    timeout: 50000,
    url: url,
    data: dataString,
    success: function (data) {
        alert('success');
        return false;
    }
});

Si es posible, ¿necesito completar la parte de "datos"? ¿Es la forma correcta? Solo publico el archivo en el servidor.

He estado buscando en Google, pero lo que encontré fue un complemento mientras que en mi plan no quiero usarlo. Al menos por el momento.


607
2018-02-23 16:58


origen


Respuestas:


la carga del archivo es no posible a través de ajax. Puede cargar archivos sin refrescar la página utilizando IFrame. puedes verificar más detalles aquí

ACTUALIZAR:

Con XHR2, se admite la carga de archivos a través de AJAX. P.ej. mediante FormData objeto, pero lamentablemente no es compatible con todos / viejos navegadores.

La compatibilidad con FormData comienza desde las siguientes versiones de navegadores de escritorio. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12+

Para más detalles, ver Enlace MDN


521
2018-02-23 17:03



Iframes ya no es necesario para cargar archivos a través de ajax. Recientemente lo hice solo. Mira estas páginas:

Uso de cargas de archivos HTML5 con AJAX y jQuery

http://dev.w3.org/2006/webapi/FileAPI/#FileReader-interface

Actualizó la respuesta y la limpió. Use la función getSize para verificar el tamaño o use la función getType para verificar los tipos. Se agregó código html y css de la barra de progreso.

var Upload = function (file) {
    this.file = file;
};

Upload.prototype.getType = function() {
    return this.file.type;
};
Upload.prototype.getSize = function() {
    return this.file.size;
};
Upload.prototype.getName = function() {
    return this.file.name;
};
Upload.prototype.doUpload = function () {
    var that = this;
    var formData = new FormData();

    // add assoc key values, this will be posts values
    formData.append("file", this.file, this.getName());
    formData.append("upload_file", true);

    $.ajax({
        type: "POST",
        url: "script",
        xhr: function () {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                myXhr.upload.addEventListener('progress', that.progressHandling, false);
            }
            return myXhr;
        },
        success: function (data) {
            // your callback here
        },
        error: function (error) {
            // handle error
        },
        async: true,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        timeout: 60000
    });
};

Upload.prototype.progressHandling = function (event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    var progress_bar_id = "#progress-wrp";
    if (event.lengthComputable) {
        percent = Math.ceil(position / total * 100);
    }
    // update progressbars classes so it fits your code
    $(progress_bar_id + " .progress-bar").css("width", +percent + "%");
    $(progress_bar_id + " .status").text(percent + "%");
};

Cómo usar la clase Upload

//Change id to your id
$("#ingredient_file").on("change", function (e) {
    var file = $(this)[0].files[0];
    var upload = new Upload(file);

    // maby check size or type here with upload.getSize() and upload.getType()

    // execute upload
    upload.doUpload();
});

Código html de Progressbar

<div id="progress-wrp">
    <div class="progress-bar"></div>
    <div class="status">0%</div>
</div>

Código css Progressbar

#progress-wrp {
  border: 1px solid #0099CC;
  padding: 1px;
  position: relative;
  height: 30px;
  border-radius: 3px;
  margin: 10px;
  text-align: left;
  background: #fff;
  box-shadow: inset 1px 3px 6px rgba(0, 0, 0, 0.12);
}

#progress-wrp .progress-bar {
  height: 100%;
  border-radius: 3px;
  background-color: #f39ac7;
  width: 0;
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.11);
}

#progress-wrp .status {
  top: 3px;
  left: 50%;
  position: absolute;
  display: inline-block;
  color: #000000;
}

256
2018-05-30 07:00



El archivo de publicación y carga de Ajax es posible. Estoy usando jQuery $.ajax función para cargar mis archivos. Intenté usar el objeto XHR pero no pude obtener resultados en el lado del servidor con PHP.

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

$.ajax({
       url : 'upload.php',
       type : 'POST',
       data : formData,
       processData: false,  // tell jQuery not to process the data
       contentType: false,  // tell jQuery not to set contentType
       success : function(data) {
           console.log(data);
           alert(data);
       }
});

Como puede ver, debe crear un objeto FormData, vacío o de (serializado? - $('#yourForm').serialize()) forma existente, y luego adjuntar el archivo de entrada.

Aquí hay más información: - Cómo subir un archivo usando jQuery.ajax y FormData - Subiendo archivos a través de jQuery, se proporciona el objeto FormData y no hay un nombre de archivo, solicitud GET

Para el proceso PHP puedes usar algo como esto:

//print_r($_FILES);
$fileName = $_FILES['file']['name'];
$fileType = $_FILES['file']['type'];
$fileError = $_FILES['file']['error'];
$fileContent = file_get_contents($_FILES['file']['tmp_name']);

if($fileError == UPLOAD_ERR_OK){
   //Processes your file here
}else{
   switch($fileError){
     case UPLOAD_ERR_INI_SIZE:   
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_FORM_SIZE:  
          $message = 'Error al intentar subir un archivo que excede el tamaño permitido.';
          break;
     case UPLOAD_ERR_PARTIAL:    
          $message = 'Error: no terminó la acción de subir el archivo.';
          break;
     case UPLOAD_ERR_NO_FILE:    
          $message = 'Error: ningún archivo fue subido.';
          break;
     case UPLOAD_ERR_NO_TMP_DIR: 
          $message = 'Error: servidor no configurado para carga de archivos.';
          break;
     case UPLOAD_ERR_CANT_WRITE: 
          $message= 'Error: posible falla al grabar el archivo.';
          break;
     case  UPLOAD_ERR_EXTENSION: 
          $message = 'Error: carga de archivo no completada.';
          break;
     default: $message = 'Error: carga de archivo no completada.';
              break;
    }
      echo json_encode(array(
               'error' => true,
               'message' => $message
            ));
}

141
2017-07-24 16:28



Formulario de carga simple   

 <script>
   //form Submit
   $("form").submit(function(evt){	 
      evt.preventDefault();
      var formData = new FormData($(this)[0]);
   $.ajax({
       url: 'fileUpload',
       type: 'POST',
       data: formData,
       async: false,
       cache: false,
       contentType: false,
       enctype: 'multipart/form-data',
       processData: false,
       success: function (response) {
         alert(response);
       }
   });
   return false;
 });
</script>
<!--Upload Form-->
<form>
  <table>
    <tr>
      <td colspan="2">File Upload</td>
    </tr>
    <tr>
      <th>Select File </th>
      <td><input id="csv" name="csv" type="file" /></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="submit"/> 
      </td>
    </tr>
  </table>
</form>


74
2018-01-19 12:36



Llego bastante tarde para esto, pero estaba buscando una solución de carga de imágenes basada en Ajax y la respuesta que estaba buscando estaba algo dispersa a lo largo de esta publicación. La solución que establecí involucraba el objeto FormData. Reuní una forma básica del código que armé. Puede ver que muestra cómo agregar un campo personalizado al formulario con fd.append () y cómo manejar los datos de respuesta cuando se realiza la solicitud de ajax.

Subir html:

<!DOCTYPE html>
<html>
<head>
    <title>Image Upload Form</title>
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
        function submitForm() {
            console.log("submit event");
            var fd = new FormData(document.getElementById("fileinfo"));
            fd.append("label", "WEBUPLOAD");
            $.ajax({
              url: "upload.php",
              type: "POST",
              data: fd,
              processData: false,  // tell jQuery not to process the data
              contentType: false   // tell jQuery not to set contentType
            }).done(function( data ) {
                console.log("PHP Output:");
                console.log( data );
            });
            return false;
        }
    </script>
</head>

<body>
    <form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
        <label>Select a file:</label><br>
        <input type="file" name="file" required />
        <input type="submit" value="Upload" />
    </form>
    <div id="output"></div>
</body>
</html>

En caso de que esté trabajando con php, esta es una forma de manejar la carga que incluye el uso de los dos campos personalizados que se muestran en el html anterior.

Upload.php

<?php
if ($_POST["label"]) {
    $label = $_POST["label"];
}
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = end($temp);
if ((($_FILES["file"]["type"] == "image/gif")
|| ($_FILES["file"]["type"] == "image/jpeg")
|| ($_FILES["file"]["type"] == "image/jpg")
|| ($_FILES["file"]["type"] == "image/pjpeg")
|| ($_FILES["file"]["type"] == "image/x-png")
|| ($_FILES["file"]["type"] == "image/png"))
&& ($_FILES["file"]["size"] < 200000)
&& in_array($extension, $allowedExts)) {
    if ($_FILES["file"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $filename = $label.$_FILES["file"]["name"];
        echo "Upload: " . $_FILES["file"]["name"] . "<br>";
        echo "Type: " . $_FILES["file"]["type"] . "<br>";
        echo "Size: " . ($_FILES["file"]["size"] / 1024) . " kB<br>";
        echo "Temp file: " . $_FILES["file"]["tmp_name"] . "<br>";

        if (file_exists("uploads/" . $filename)) {
            echo $filename . " already exists. ";
        } else {
            move_uploaded_file($_FILES["file"]["tmp_name"],
            "uploads/" . $filename);
            echo "Stored in: " . "uploads/" . $filename;
        }
    }
} else {
    echo "Invalid file";
}
?>

58
2018-03-24 21:53



Una carga AJAX es posible con XMLHttpRequest (). Sin iframes necesarios. El progreso de carga se puede mostrar.

Para detalles, ver: Respuesta https://stackoverflow.com/a/4943774/873282 preguntar Progreso de carga de jQuery y carga de archivos AJAX.


29
2018-04-02 13:21



  • Use un iframe oculto y establezca el objetivo de su formulario en el nombre de ese iframe. De esta forma, cuando se envíe el formulario, solo se actualizará el iframe.
  • Haga que un controlador de eventos se registre para el evento de carga del iframe para analizar la respuesta.

Más detalles en mi blog: http://blog.manki.in/2011/08/ajax-fie-upload.html.


13
2017-08-07 04:31