Un simple plug-in jQuery ajaxfileupload.js implémente le fichier de téléchargement ajax example_jquery

Le plug-in jQuery AjaxFileUpload peut réaliser le téléchargement de fichiers ajax. Le plug-in est très simple à utiliser. Tout d'abord, apprenez à utiliser correctement le plug-in AjaxFileUpload, puis découvrez certains messages d'erreur et solutions courants.

Mode d'emploi

Besoin d'utiliser le fichier de bibliothèque jQuery et le fichier de bibliothèque AjaxFileUpload

Exemples d'utilisation

1, y compris la partie fichier

Copier le code Le code est le suivant :

98a409b4e0dd20993c98e99a88ced0d82cacc6d41bbb37262a98f745aa00fbf0 c1a507ce4e25efe7d9a05acf2ed209252cacc6d41bbb37262a98f745aa00fbf0

2. Partie HTML

Copier le code Le code est le suivant :

89b25275b4a8bb4532c41a2aa8161b05 11091c232b6ac165cead5133eec293a5 54aa885836428fce56fd97664ef179caTéléchargercce482c2fcc38d1c9412c7edea96d6e9

Seulement trois éléments sont nécessaires, une icône de chargement dynamique, un champ de fichier et un bouton
Remarque : L'utilisation du plug-in AjaxFileUpload pour télécharger des fichiers ne nécessite pas de formulaire, comme suit :

cc59bea3adee72cab5ddc898397ea2f4 ...Code HTML associé... 559e5777f286a62b334df027bce5023f Parce que le plug-in AjaxFileUpload générera automatiquement un formulaire de soumission de formulaire.

Pour l'ID et le nom du domaine du fichier, le paramètre fileElementId du plug-in ajaxFileUpload doit obtenir l'ID du domaine du fichier. Si vous effectuez l'opération de téléchargement du fichier, vous devez connaître le nom de domaine du fichier afin d'obtenir le fichier téléchargé. informations du dossier. La relation entre les deux doit être claire.

3, partie javascript

Description du paramètre principal : 1. url représente le chemin du fichier pour le traitement des opérations de téléchargement de fichiers. Vous pouvez tester si l'URL est directement accessible dans le navigateur, comme ci-dessus : upload.php. 2. fileElementId représente l'ID de domaine du fichier, comme ci-dessus : fileToUpload

3. Que secureuri active la soumission sécurisée, la valeur par défaut est false

4. données dataType, choisissez généralement json, l'écologie originale de javascript

<script type="text/javascript"> 
function ajaxFileUpload (){ 
loading();//动态加载小图标 
$.ajaxFileUpload ({ 
url :'upload.php', 
secureuri :false, 
fileElementId :'fileToUpload', 
dataType : 'json', 
success : function (data, status){ 
if(typeof(data.error) != 'undefined'){ 
if(data.error != ''){ 
alert(data.error); 
}else{ 
alert(data.msg); 
} 
} 
}, 
error: function (data, status, e){ 
alert(e); 
} 
}) 
return false; 
} 
function loading (){ 
$("#loading ").ajaxStart(function(){ 
$(this).show(); 
}).ajaxComplete(function(){ 
$(this).hide(); 
}); 
} 
</script> 

5. Fonction de traitement après une soumission réussie

6. Fonction de traitement des échecs de soumission d'erreur

Il existe deux méthodes ci-dessus, une fonction d'invite de petite icône de chargement dynamique chargement() et la fonction de téléchargement de fichier ajaxFileUpload $.ajaxFileUpload(), qui est similaire à la fonction jQuery.ajax() que nous utilisons. Elle est très simple à utiliser. , et je l'ai omis ici. PHP gère les fichiers téléchargés, et c'est aussi simple que d'utiliser le plug-in jQuery AjaxFileUpload pour implémenter les fichiers ajax.

En même temps, nous devons connaître les invites d'erreur pertinentes

1, SyntaxError : manquant ; avant l'erreur d'instruction
Si cette erreur se produit, vous devez vérifier si le chemin de l'url est accessible

2, SyntaxError : erreur de syntaxe

Si cette erreur se produit, vous devez vérifier s'il y a des erreurs de syntaxe dans le fichier PHP qui gère l'opération de soumission

3, SyntaxError : erreur d'identifiant de propriété non valide

Si cette erreur se produit, vous devez vérifier si l'ID d'attribut existe

4, SyntaxError : manquant } dans l'erreur d'expression XML

Si cette erreur se produit, vous devez vérifier si le nom de domaine du fichier est cohérent ou n'existe pas

5, autres erreurs personnalisées

Vous pouvez utiliser la variable $error pour imprimer directement afin de vérifier si chaque paramètre est correct, ce qui est beaucoup plus pratique que les invites d'erreur non valides ci-dessus.

Utiliser le plug-in jQuery AjaxFileUpload pour télécharger des fichiers sans actualisation est très pratique. En raison de sa simplicité et de sa facilité d'utilisation, ce plug-in compte le plus grand nombre d'utilisateurs par rapport aux autres plug-ins de téléchargement de fichiers, c'est donc le cas. fortement recommandé.

Page de traitement :

Commentaires supplémentaires d'autres internautes :

Code de la page :

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class web_ajax_FileUpload : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  HttpFileCollection files = HttpContext.Current.Request.Files;


  //if (files[0].ContentLength > 5)
  //{
  // Response.Write("{");
  // Response.Write("msg:'" + files[0].FileName + "',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  //else
  //{
  // Response.Write("{");
  // Response.Write("msg:'没有文件被上传',");
  // Response.Write("error:'文件上传失败'");
  // Response.Write("}");
  //}
  files[0].SaveAs("d:/adw.jpg");
  Response.Write("{");
  Response.Write("msg:'a',");
  Response.Write("error:''");
  Response.Write("}");

  //Response.Write("{");
  //Response.Write("msg:'ggg\n',");
  //Response.Write("error:'aa\n'");
  //Response.Write("}");
  Response.End();
 }
}

Copier le code

Le code est le suivant :

100db36a723c770d327fc0aef2ce13b1
3bd0c159b08b308f7fb80615aafbf057
0c54930bea48f598f730c6be244850d72cacc6d41bbb37262a98f745aa00fbf0
         a787e67392ba4615922d8cf7af8591d02cacc6d41bbb37262a98f745aa00fbf0

a53fb0b256f2fd639bfc7113362f0de4
        4ec11beb6c39d0703d1751d203c17053
            fonction ajaxFileUpload(){
$.ajaxFileUpload(
                                                        {
Url : 'update.do? Method = uploader', // besoin d'un lien vers l'adresse du serveur
secureuri: faux,
FileElementid : 'Housemaps', // L'attribut ID de la boîte de sélection de fichier
Type de données : "xml",                             réussite : fonction (données, statut)                                                                                                                                                                                                                                                                                                                                                                                       $('#result').html('Ajouté avec succès');
                 },
Erreur : Fonction (données, statut, e) // équivalent                                                 {
                            $('#result').html('L'ajout a échoué');
                }
            }
                                                                       );
                                                                                 }
2cacc6d41bbb37262a98f745aa00fbf0
3c45d66e952a6f230161f163dc66ca7c 1ef4b25f1615c541b0895ef133370894
7179caff31ba7967e99850a4aa2c3bdf             bb12889be9509b7c88109280a7655834            f66b284482010d07a0a4c51e3dc758aa
559e5777f286a62b334df027bce5023f ca7204e18f1cb9313f7d7fb65b59687216b28748ea4df4d9c2150843fecfba68
 
6c97cde0ef6a95cdefeec7ad54d1df97
73a6ac4ed44ffec12cee46588e518a5e



Code du serveur :





Copier le code

Le code est le suivant :

la classe publique UpdateAction étend DispatchAction {

    téléchargeur ActionForward public (mappage ActionMapping, formulaire ActionForm,
            Requête HttpServletRequest, réponse HttpServletResponse) {
        UpFormForm upFormForm = (UpFormForm) formulaire ;
        FormFile ff = upFormForm.getHouseMaps();
        essayez {
            InputStream est = ff.getInputStream();
            Fichier file = new File("D:/" ff.getFileName());            //指定文件存储的路径和文件名
            OutputStream os = nouveau FileOutputStream(fichier);
           
            octet[] b = nouvel octet[1024];
            int len ​​= 0;
            while((len = is.read(b)) != -1){
                os.write(b, 0, len);
            >
            os.close();
            est.close();
        } catch (Exception e) {
            e.printStackTrace();
           
        >
       
        renvoie null ;
    >
>