jQuery AJAX téléchargement de fichiers PHP

Je veux implémenter un simple téléchargement de fichier dans ma page intranet, avec la plus petite configuration possible.

Voici ma partie HTML:

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

et voici mon 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"); 
        }
    });
});

Il existe un dossier nommé «uploads» dans le répertoire racine du site Web, avec des autorisations de modification pour «users» et «IIS_users».

Lorsque je sélectionne un fichier avec le formulaire de fichier et que j'appuie sur le bouton de téléchargement, la première alerte renvoie "[object FormData]". la deuxième alerte n'est pas appelée et le dossier "uploads" est vide aussi !?

Quelqu'un peut-il m'aider à découvrir ce qui ne va pas?

La prochaine étape devrait également être de renommer le fichier avec un nom généré côté serveur. Peut-être que quelqu'un peut aussi me donner une solution à ce problème.

Vous avez besoin d'un script qui s'exécute sur le serveur pour déplacer le fichier vers le répertoire de téléchargement. La ajaxméthode jQuery (exécutée dans le navigateur) envoie les données du formulaire au serveur, puis un script sur le serveur gère le téléchargement. Voici un exemple utilisant PHP.

Votre code HTML est correct, mais mettez à jour votre script JS jQuery pour qu'il ressemble à ceci:

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

Et maintenant pour le script côté serveur, en utilisant PHP dans ce cas.

upload.php : un script PHP qui s'exécute sur le serveur et dirige le fichier vers le répertoire uploads:

<?php

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

?>

En outre, quelques points sur le répertoire de destination:

1. Assurez-vous que vous avez le bon chemin d'accès au serveur , c'est-à-dire en commençant à l'emplacement du script PHP quel est le chemin d'accès au répertoire de téléchargement, et
2. Assurez-vous qu'il est inscriptible .

Et un peu sur la fonction PHP move_uploaded_file, utilisée dans le 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']est le nom du fichier tel qu'il est téléchargé. Vous n'êtes pas obligé de l'utiliser. Vous pouvez donner au fichier le nom de votre choix (compatible avec le système de fichiers du serveur):

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

Et enfin, soyez conscient de vos valeurs de configuration PHP upload_max_filesizeET post_max_size, et assurez-vous que vos fichiers de test ne dépassent pas non plus. Voici quelques conseils sur la manière de vérifier la configuration PHP et de définir la taille maximale des fichiers et les paramètres de publication .

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

et c'est le fichier php pour recevoir les fichiers uplaoded

<?
$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);
?>

Utilisez pur js

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)

Le nom de fichier est automatiquement inclus dans la requête et le serveur peut le lire, le 'content-type' est automatiquement défini sur 'multipart / form-data'. Voici un exemple plus développé avec gestion des erreurs et envoi json supplémentaire

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>

Meilleur téléchargement de fichier à l'aide de Jquery Ajax avec Materialise Cliquez ici pour télécharger

Lorsque vous sélectionnez l'image, l'image sera convertie en base 64 et vous pouvez la stocker dans la base de données afin qu'elle soit également légère.