web-dev-qa-db-fra.com

PHP envoi de fichier avec jquery post

Faites-moi savoir si quelqu'un sait quel est le problème avec ce code. 

En gros, je veux télécharger un fichier en utilisant jQuery

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script type="text/javascript">
    $(document).ready(function(event) {
      $('#form1').submit(function(event) {
        event.preventDefault();
        $.post('post.php',function(data){
           $('#result').html(data);
        });
      });
    });
  </script>  
</head>
<body>
<form id="form1">
  <h3>Please input the XML:</h3>
  <input id="file" type="file" name="file" /><br/>
  <input id="submit" type="submit" value="Upload File"/>
</form>

<div id="result">call back result will appear here</div>

</body>
</html>

et mon php 'post.php'

<?php
  echo $file['tmp_name'];
?>

Le nom du fichier téléchargé n'est pas renvoyé. Le problème est que je ne pouvais pas accéder au fichier téléchargé.

Merci d'avance! Shiv

phpjqueryfile-upload
13
Shiv

En gros, je veux télécharger un fichier en utilisant jQuery

Vous ne pouvez pas télécharger de fichiers avec AJAX. Vous pouvez utiliser le plugin jquery.form qui utilise un iframe caché:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="http://malsup.github.com/jquery.form.js"></script>
    <script type="text/javascript">
        $(document).ready(function(event) {
            $('#form1').ajaxForm(function(data) {
                $('#result').html(data);
            });
        });
  </script>  
</head>
<body>
<form id="form1" action="post.php" method="post" enctype="multipart/form-data">
    <h3>Please input the XML:</h3>
    <input id="file" type="file" name="file" /><br/>
    <input id="submit" type="submit" value="Upload File"/>
</form>

<div id="result">call back result will appear here</div>

</body>
</html>

Notez également le enctype="multipart/form-data" sur le formulaire.

Une autre possibilité consiste à utiliser le fichier HTML5 File API qui vous permet de réaliser cela en supposant que le navigateur client le supporte.

17
Darin Dimitrov

Il n'est pas possible de télécharger des fichiers avec jQuery $ .post, néanmoins, avec l'API de fichier et XMLHttpRequest, il est parfaitement possible de télécharger un fichier au format AJAX, et vous pouvez même savoir combien de données ont déjà été téléchargées… 

$('input').change(function() 
{
    var fileInput = document.querySelector('#file');

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload/');

    xhr.upload.onprogress = function(e) 
    {
        /* 
        * values that indicate the progression
        * e.loaded
        * e.total
        */
    };

    xhr.onload = function()
    {
        alert('upload complete');
    };

    // upload success
    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0))
    {
        // if your server sends a message on upload sucess, 
        // get it with xhr.responseText
        alert(xhr.responseText);
    }

    var form = new FormData();
    form.append('title', this.files[0].name);
    form.append('pict', fileInput.files[0]);

    xhr.send(form);
}
6
Buzut

Non non non, vous devez utiliser un plugin de formulaire jQuery pour le téléchargement asynchrone de fichiers. Vous ne pouvez pas télécharger de fichier avec la méthode jQuery $ .post. Le fichier sera chargé avec iframe caché

Une autre méthode consiste à utiliser le téléchargement HTML5 avec FileAPI/BlobApi.

5
odiszapc

Votre upload.php a une erreur.

vous devriez changer votre cette partie.

echo $file['tmp_name'];

à:- 

echo $_FILES['file']['tmp_name'];
1
aary trivedi

Essayez de télécharger avec un iframe car vous ne pouvez pas envoyer de fichier avec la méthode $ .post.

0
user1432124