File PHP di jQuery AJAX

Voglio implementare un semplice caricamento di file nella mia pagina intranet, con la minima configurazione possibile.

Questa è la mia parte HTML:

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

e questo è il mio script jquery JS:

$("#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"); 
        }
    });
});

Esiste una cartella denominata "uploads" nella directory principale del sito Web, con autorizzazioni di modifica per "utenti" e "IIS_users".

Quando seleziono un file con il modulo file e premo il pulsante di caricamento, il primo avviso restituisce "[object FormData]". il secondo avviso non viene chiamato e anche la cartella "uploads" è vuota !?

Qualcuno può aiutarmi a scoprire cosa c'è che non va?

Dovrebbe essere anche il passaggio successivo, per rinominare il file con un nome generato dal lato server. Forse qualcuno può darmi una soluzione anche per questo.

È necessario uno script eseguito sul server per spostare il file nella directory dei caricamenti. Il ajaxmetodo jQuery (in esecuzione nel browser) invia i dati del modulo al server, quindi uno script sul server gestisce il caricamento. Ecco un esempio usando PHP.

Il tuo HTML va bene, ma aggiorna il tuo script JS jQuery in questo modo:

$('#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
        }
     });
});

E ora per lo script lato server, usando PHP in questo caso.

upload.php : uno script PHP che viene eseguito sul server e indirizza il file nella directory dei caricamenti:

<?php

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

?>

Inoltre, un paio di cose sulla directory di destinazione:

1. Assicurati di avere il percorso del server corretto , ovvero, iniziando dalla posizione dello script PHP qual è il percorso della directory dei caricamenti, e
2. Assicurati che sia scrivibile .

E un po 'sulla funzione PHP move_uploaded_file, usata nello 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']è il nome del file mentre viene caricato. Non devi usarlo. Puoi dare al file qualsiasi nome (compatibile con il filesystem del server) che desideri:

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

Infine, fai attenzione ai valori di configurazione di PHP upload_max_filesizeAND post_max_sizee assicurati che i tuoi file di test non superino nessuno dei due. Ecco alcuni suggerimenti su come controllare la configurazione di PHP e su come impostare le dimensioni massime del file e pubblicare le impostazioni .

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

e questo è il file php per ricevere i file aggiornati

<?
$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 puri

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)

Il nome file viene automaticamente incluso per la richiesta e il server può leggerlo, il "tipo di contenuto" viene automaticamente impostato su "multipart / form-data". Ecco un esempio più sviluppato con gestione degli errori e invio json aggiuntivo

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>

Miglior caricamento di file utilizzando Jquery Ajax con Materialise Fare clic qui per scaricare

Quando si seleziona l'immagine, l'immagine verrà convertita nella base 64 e sarà possibile memorizzarla nel database in modo che sia leggera.