Maison > interface Web > js tutoriel > le corps du texte

Téléchargement de fichiers jQuery Ajax (php)

高洛峰
Libérer: 2017-01-06 14:41:03
original
1143 Les gens l'ont consulté

Comment implémenter le téléchargement de fichiers Ajax de jQuery, téléchargement de fichiers PHP fidèle.
Fichier de téléchargement AJAX, fichier de téléchargement PHP.

[Téléchargement de fichiers PHP]

Avant de commencer, je pense qu'il est nécessaire d'expliquer brièvement le principe du téléchargement de fichiers via le WEB.
En fait, que ce soit PHP, JSP ou ASP qui traite les fichiers téléchargés ici, le WEB a déjà téléchargé les fichiers sur le serveur. Nous utilisons simplement la fonction de traitement de téléchargement pour traiter les fichiers téléchargés.
Les fonctions de traitement sont généralement implémentées à l'aide de langages côté serveur tels que PHP, JSP et ASP. Alors, comment télécharger des fichiers via WEB (protocole HTTP ?) Vous avez besoin d'un code HTML similaire au suivant :
test.html

<form action="do_file_upload.php" method="post" enctype="multipart/form-data">
<p>Pictures:
<input type="file" name="picture" />
<input type="submit" value="Send" />
</p>
</form>
Copier après la connexion

Remarque : enctype="multipart/form-data", oui Obligatoire , il indique à la table FORM qu'il s'agit d'un type de téléchargement de fichier. Une fois la demande réussie, le fichier sera téléchargé dans le dossier temporaire du serveur
Quant à la façon dont le fichier sera traité une fois arrivé à destination. juste une question de PHP, JSP et ASP.
(Cependant, ne soyez pas trop heureux trop tôt. Si le fichier n'est pas déplacé vers d'autres endroits ou renommé, le fichier sera supprimé à la fin de la demande de formulaire. Nous devons donc écrire un script pour gérer le téléchargement. fichiers)
Ici, nous utilisons PHP pour traiter
do_file_upload.php

<?php
$error = ""; //上传文件出错信息
$msg = "";
$fileElementName = &#39;picture&#39;;
    $allowType = array(".jpg",".gif",".png"); //允许上传的文件类型
    $num      = strrpos($_FILES[&#39;picture&#39;][&#39;name&#39;] ,&#39;.&#39;);  
$fileSuffixName    = substr($_FILES[&#39;picture&#39;][&#39;name&#39;],$num,8);//此数可变  
$fileSuffixName    = strtolower($fileSuffixName); //确定上传文件的类型

$upFilePath             = &#39;d:/&#39;; //最终存放路径
if(!empty($_FILES[$fileElementName][&#39;error&#39;]))
{
   switch($_FILES[$fileElementName][&#39;error&#39;])
   {
    case &#39;1&#39;:
     $error = &#39;传的文件超过了 php.ini 中 upload_max_filesize 选项限制的值&#39;;
     break;
    case &#39;2&#39;:
     $error = &#39;上传文件的大小超过了 HTML 表单中 MAX_FILE_SIZE 选项指定的值&#39;;
     break;
    case &#39;3&#39;:
     $error = &#39;文件只有部分被上传&#39;;
     break;
    case &#39;4&#39;:
     $error = &#39;没有文件被上传&#39;;
     break;
    case &#39;6&#39;:
     $error = &#39;找不到临时文件夹&#39;;
     break;
    case &#39;7&#39;:
     $error = &#39;文件写入失败&#39;;
     break;
    default:
     $error = &#39;未知错误&#39;;
   }
}elseif(empty($_FILES[&#39;fileToUpload&#39;][&#39;tmp_name&#39;]) || $_FILES[&#39;fileToUpload&#39;][&#39;tmp_name&#39;] == &#39;none&#39;)
{
   $error = &#39;没有上传文件.&#39;;
}else if(!in_array($fileSuffixName,$allowType))
{
   $error = &#39;不允许上传的文件类型&#39;; 
}else{
  );
   if($ok === FALSE){
    $error = &#39;上传失败&#39;;
   }
}
?>
Copier après la connexion

Autre remarque : à propos du tableau $_FILES

Ce tableau contient toutes les informations sur les fichiers téléchargés, c'est-à-dire , informations enregistrées lors du téléchargement de fichiers.
Le contenu du tableau $_FILES dans l'exemple ci-dessus est le suivant. Supposons que le nom du champ de téléchargement de fichier soit userfile, comme indiqué dans l'exemple ci-dessus. Le nom peut être celui que vous voulez.

$_FILES['userfile']['name']
Le nom d'origine du fichier de la machine client.

$_FILES['userfile']['type']
Le type MIME du fichier, si le navigateur fournit cette information. Un exemple est "image/gif". Cependant, ce type MIME n'est pas vérifié côté PHP, alors ne le tenez pas pour acquis.

$_FILES['userfile']['size']
La taille du fichier téléchargé, en octets.

$_FILES['userfile']['tmp_name']
Le nom du fichier temporaire stocké sur le serveur après le téléchargement du fichier.

$_FILES['userfile']['error']
Code d'erreur lié à l'upload du fichier. Ce projet a été ajouté dans PHP version 4.2.0.

[Téléchargement de fichiers AJAX]

En fait, il s'agit de réaliser un téléchargement de fichiers sans actualisation. Le principe de téléchargement de fichiers IFRAME peut être utilisé.
En fait lors du téléchargement de fichiers avec PHP. . . Seul le format $_FILES peut être utilisé, mais si nous utilisons simplement JS pour obtenir son identifiant, tel que ..document.getElementById('img').value ou jquery $("#img") dans le formulaire ne peut pas être réellement téléchargé (mais il y a encore beaucoup de gens qui le font, y compris moi au début).
Mais la fonction nécessite également la mise en œuvre de ce que l'on appelle le « téléchargement asynchrone », que dois-je faire ? ? Vous pouvez uniquement utiliser des composants tiers, ou en écrire un vous-même (intégrer un IFRAME dans la page Web). Mais si vous envisagez du temps de développement, vous pouvez faire appel à un tiers. Voici un bon composant de téléchargement de fichiers jQuery Ajax, qui est "ajaxfileupload.js". Son adresse de téléchargement de composant est : http://www.phpletter.com/ , il y a une démo d'application PHP à l'intérieur après le téléchargement, qui est facile à comprendre.
Processus :
(1) Le code du fichier sur le front end : test.php

    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="ajaxfileupload.js"></script>
    <script type="text/javascript">
       function ajaxFileUpload()
               {
                  $.ajaxFileUpload
                     (
                       {
                            url:&#39;doajaxfileupload.php&#39;, //你处理上传文件的服务端
                            secureuri:false,
                            fileElementId:&#39;img&#39;,
                            dataType: &#39;json&#39;,
                            success: function (data)
                                  {
                                    alert(data.file_infor);
                                  }
                               }
                         )
                       return false;
                 } 
     </script>
Copier après la connexion

Le HTML correspondant est :

        <input id="img" type="file" size="45" name="img" class="input">
        <button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>
Copier après la connexion

De cette façon , le client est terminé.

(2) Côté serveur doajaxfileupload.php

Afin de détecter facilement si la valeur est réellement transmise, vous pouvez la sauvegarder.
                                                                                                                                   Vient maintenant les informations familières :

Bien sûr, le traitement réel est similaire à ceci :
     array(
             &#39;name&#39;=>&#39;lamp.jpg&#39;,
             &#39;type&#39;=>&#39;image/pjpeg&#39;,
             &#39;tmp_name&#39;=>&#39;c:\windows\temp\phpFA.tmp&#39;,
             &#39;error&#39;=>0,
             &#39;size&#39;=>3127
         )
Copier après la connexion

Autre remarque : en fait, vous pouvez intégrer un IFRAME dans une page, puis utilisez le formulaire POST natif pour soumettre dans l'IFRAME. Le plug-in JQUERY utilise également cette méthode. C'est juste qu'il s'agit d'un IFRAME et d'un formulaire générés dynamiquement
   <?php
     $upFilePath = "d:/";
     );
   if($ok === FALSE){
    echo json_encode(&#39;file_infor&#39;=>&#39;上传失败&#39;);
   }else{
    echo json_encode(&#39;file_infor&#39;=>&#39;上传成功&#39;);
   }
   ?>
Copier après la connexion

Pour plus d'articles sur le téléchargement de fichiers jQuery Ajax (php), veuillez faire attention au site Web chinois PHP !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal