jQuery Ajax File Upload

Ajax post and upload file is possible. I’m using jQuery $.ajax function to load my files. I tried to use the XHR object but could not get results on the server side with 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);
       }
});

As you can see, you must create a FormData object, empty or from (serialized? – $('#yourForm').serialize()) existing form, and then attach the input file.

Here is more information:
– How to upload a file using jQuery.ajax and FormData
– Uploading files via jQuery, object FormData is provided and no file name, GET request

For the PHP process you can use something like this:

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

Leave a Comment