télécharger et traiter le fichier sélectionné par l'utilisateur en html, javascript et php

Question

Je veux qu'un utilisateur sélectionne un fichier et que php mette le contenu en db. Maintenant, la dernière partie (traitement du fichier en php) est facile. Mais y a-t-il un moyen de traiter un fichier sélectionné par l'utilisateur sans charger de nouvelles pages?

Si j'utilise les éléments suivants:

<FORM ACTION="upload.php" METHOD="post" ENCTYPE="multipart/form-data"> 
<INPUT TYPE="file" NAME="somefile"><BR /> 
<INPUT TYPE="submit" NAME="submit" VALUE="Upload"> 
</FORM> 

page upload.php charges après que je automaticaly puis insérer le fichier téléchargé dans une base de données.

Je voudrais utiliser une combinaison de javascript, php et xajax pour traiter le fichier. Je ne pense pas que quelque chose comme cela est possible:

<FORM ACTION="javascript:xajax_proces_file()" METHOD="post" ENCTYPE="multipart/form-data"> 
<INPUT TYPE="file" NAME="somefile"><BR /> 
<INPUT TYPE="submit" NAME="submit" VALUE="Upload"> 
</FORM> 

Parce que le fichier est téléchargé lorsque la fonction xajax_process_file() est appelée. Ou est-ce? Je pense que je ne comprends pas parfaitement le principe des uploads avec javascript, html et php.

Toute aide et/ou clarification est très appréciée.

Answer 1

Il peut aider à penser à cela comme deux processus d'étape. D'abord, l'utilisateur remplit le formulaire et le soumet - première étape.

Deuxième (qui est l'action par défaut) le fichier cible spécifié prend l'entrée du formulaire et l'utilise pour faire n'importe quoi. Vous pouvez presque penser à un formulaire "action" en tant que lien - l'action par défaut d'un clic sur un lien est d'afficher le résultat du lien. Il en va de même pour une action de formulaire - afficher le résultat d'une action de formulaire. Maintenant, il est possible via JavaScript de désactiver l'action par défaut d'un élément pour un événement particulier. Il est également possible via JavaScript d'accéder au mécanisme HTTP d'un navigateur pour envoyer/recevoir une requête HTTP (ce qui correspond à chaque demande de page - que ce soit depuis votre barre d'URL, un lien de page ou un résultat de recherche Google). Et c'est ce qu'AJAX en termes simples - en utilisant JavaScript pour utiliser un mécanisme HTTP des navigateurs pour envoyer des requêtes à un serveur web et recevoir une réponse possible sans l'utilisation d'un événement click traditionnel. Vous combinez ensuite ceci avec l'utilisation de JavaScript pour «désactiver» les actions par défaut et suivez l'action que vous avez spécifiée pour obtenir des informations d'un serveur et les ajouter à la page sans avoir à actualiser la page.

Plusieurs fois pour empêcher l'action defualt d'avoir lieu pour un certain élément, vous renvoyez false dans votre code. La même chose vaut pour votre forme. En utilisant javascript:

form.onSubmit = function() { 
    blah blah blah.....Use ajax to send the information to the form handler 
    return false; //Prevents the defualt action of the submit event 
} 

Si vous êtes vraiment nouveau à AJAX, je vous suggère de vérifier cette tutorial et ce one. Enfin, je recommande d'utiliser un framework Javascript comme jQuery pour vous aider - il est génial et fait beaucoup de choses intéressantes, mais il a aussi des fonctionnalités intégrées pour AJAX.

Voici une autre tutorial pour soumettre un formulaire sans actualisation de page (utilise jquery).

Answer 2

une alternative est de faire le formulaire dirige l'action à un iframe, après le traitement de la requête dans l'iframe, passez par JS pour effacer la forme du père