web-dev-qa-db-fra.com

jQuery AJAX upload de fichier PHP

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

Ceci est ma partie HTML:

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

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

Un dossier nommé "uploads" se trouve dans le répertoire racine du site Web, avec les autorisations de modification pour "utilisateurs" et "IIS_users".

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

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

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

javascriptphpjqueryajaxupload
137
user2355509

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

Votre code HTML convient, 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, utilisez PHP dans ce cas.

upload.php : un script PHP qui s'exécute sur le serveur et dirige le fichier dans 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 éléments concernant le répertoire de destination:

  1. Assurez-vous que le chemin du serveur est correct , c’est-à-dire en commençant à l’emplacement du script PHP, quel est le chemin du répertoire de téléchargement, et
  2. Assurez-vous qu'il est accessible en écriture .

Et un peu plus sur la fonction PHP move_uploaded_file , utilisée dans le fichier upload.php script:

_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 chargé. Vous n'êtes pas obligé de l'utiliser. Vous pouvez donner au fichier le nom de votre choix (système de fichiers serveur compatible):

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

Et enfin, soyez conscient de vos valeurs de configuration PHP upload_max_filesize AND post_max_size , et assurez-vous que vos fichiers de test ne le sont pas. dépasser soit. Voici quelques conseils pour vous aider vérifiez PHP configuration et comment vous définissez les paramètres de taille de fichier maximale et de publication .

256
bloodyKnuckles
**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" />';
}
1
Hasib Kamal
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);
    }
});
1
Azhar

Utilisez pure 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 'type de contenu' 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>
0
Kamil Kiełczewski

et c'est le fichier php pour recevoir les fichiers téléchargés

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