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 :

2. Partie HTML

Copier le code Le code est le suivant :

Télécharger

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 :

...Code HTML associé... 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 :

        

       

                      

 





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 ;
    >
>