carga de archivos jQuery AJAX PHP

Quiero implementar una carga de archivo simple en mi página de intranet, con la configuración más pequeña posible.

Esta es mi parte HTML:

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

y este es mi script JS jquery:

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

Hay una carpeta llamada "uploads" en el directorio raíz del sitio web, con permisos de cambio para "usuarios" y "IIS_users".

Cuando selecciono un archivo con el formulario de archivo y presiono el botón de carga, la primera alerta devuelve "[object FormData]". ¿No se llama a la segunda alerta y la carpeta "uploads" también está vacía?

¿Alguien puede ayudarme a descubrir qué está mal?

También el siguiente paso debería ser cambiar el nombre del archivo con un nombre generado por el lado del servidor. Quizás alguien también pueda darme una solución para esto.

Necesita un script que se ejecute en el servidor para mover el archivo al directorio de cargas. El ajaxmétodo jQuery (que se ejecuta en el navegador) envía los datos del formulario al servidor, luego un script en el servidor maneja la carga. Aquí hay un ejemplo usando PHP.

Su HTML está bien, pero actualice su script JS jQuery para que se vea así:

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

Y ahora para el script del lado del servidor, usando PHP en este caso.

upload.php : un script PHP que se ejecuta en el servidor y dirige el archivo al directorio de cargas:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Además, un par de cosas sobre el directorio de destino:

1. Asegúrese de tener la ruta correcta del servidor , es decir, comenzando en la ubicación del script PHP, cuál es la ruta al directorio de carga, y
2. Asegúrate de que se pueda escribir .

Y un poco sobre la función PHP move_uploaded_file, utilizada en el script upload.php :

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name']es el nombre del archivo a medida que se carga. No tienes que usar eso. Puede darle al archivo cualquier nombre (compatible con el sistema de archivos del servidor) que desee:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

Y finalmente, tenga en cuenta sus valores de configuración upload_max_filesizeY de PHP post_max_size, y asegúrese de que sus archivos de prueba no excedan tampoco. Aquí hay ayuda para verificar la configuración de PHP y cómo establecer el tamaño máximo de archivo y la configuración de publicación .

**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}

var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});

y este es el archivo php para recibir los archivos subidos

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        foreach ($_FILES as $file) {
            if (move_uploaded_file($file['tmp_name'], $uploaddir . basename( $file['name']))) {
                $files[] = $uploaddir . $file['name'];
            } else {
                $error = true;
            }
        }
        $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
    } else {
        $data = array('success' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>

Usa js puro

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)

El nombre de archivo se incluye automáticamente para solicitarlo y el servidor puede leerlo, el 'tipo de contenido' se establece automáticamente en 'multiparte / datos de formulario'. Aquí hay un ejemplo más desarrollado con manejo de errores y envío adicional de json

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}

<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>

Mejor carga de archivos usando Jquery Ajax con Materialise Haga clic aquí para descargar

Cuando selecciona la imagen, la imagen se convertirá en la base 64 y puede almacenarla en la base de datos para que también sea liviana.