Introduction détaillée au plug-in de téléchargement de fichiers asynchrones jQuery ajaxFileUpload_jquery

1. ajaxFileUpload est un plug-in jQuery permettant de télécharger des fichiers de manière asynchrone.

Téléchargez une version que je ne connais pas, pour ne pas avoir à la chercher partout à l'avenir.

Syntaxe : $.ajaxFileUpload([options])

Description du paramètre options :

1.url Adresse du gestionnaire de téléchargement. ​
2. fileElementId　　　 L'ID du champ de fichier qui doit être téléchargé, c'est-à-dire l'ID de .
3. secureuri S'il faut activer la soumission sécurisée, la valeur par défaut est false.
4. dataType Le type de données renvoyé par le serveur. Peut être XML, script, json, html. Si vous ne le remplissez pas, jQuery le déterminera automatiquement.
5. Le succès est une fonction de traitement qui est automatiquement exécutée après une soumission réussie. Les données de paramètre sont les données renvoyées par le serveur.
6. erreur Une fonction de traitement qui est automatiquement exécutée si la soumission échoue.
7. Paramètres personnalisés de données. Cette chose est plus utile lorsqu'il y a des données liées à l'image téléchargée, cette chose sera utilisée.
8, tapez Lorsque vous souhaitez soumettre des paramètres personnalisés, ce paramètre doit être défini sur post

Message d'erreur :

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 existe une erreur de syntaxe dans le gestionnaire d'arrière-plan du serveur 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 du champ de texte existe
4. SyntaxError : erreur } manquante dans l'expression XML
Si cette erreur se produit, vous devez vérifier si le nom 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.

Utilisation :

Première étape : introduisez d'abord les plug-ins jQuery et ajaxFileUpload. Faites attention à l'ordre. Inutile de préciser que c'est le cas pour tous les plug-ins.

Copier le code Le code est le suivant :

Étape 2 : Code HTML :

Copier le code Le code est le suivant :

Étape 3 : Code JS

Copier le code Le code est le suivant :

Étape 4 : Code upload.aspx de la page backend :

Copier le code Le code est le suivant :

protected void Page_Load (expéditeur de l'objet, EventArgs e)
        {
            Fichiers HttpFileCollection = Request.Files;
            string msg = string.Empty;
            erreur de chaîne = chaîne.Empty;
            chaîne imgurl;
            si (files.Count > 0)
            {
                files[0].SaveAs(Server.MapPath("/") System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小为:" files[0].ContentLength;
                imgurl = "/" fichiers[0].FileName;
                string res = "{ error:'" error "', msg:'" msg "',imgurl:'" imgurl "'}";
                Réponse.Write(res);
                Réponse.End();
            >
        >

本实例完整代码下载

来一个MVC版本的实例：

控制器代码

复制代码 代码如下 :

classe publique HomeController : Contrôleur
    {
        Indice ActionResult public()
        {
            retourner View();
        >

        public ActionResult Upload()
        {
            HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
            chaîne imgPath = "";
            si (hfc.Count > 0)
            {
                imgPath = "/testUpload" hfc[0].FileName;
                string PhysicalPath = Server.MapPath(imgPath);
                hfc[0].SaveAs(PhysicalPath);
            >
            retourner le contenu (imgPath);
        >
    >

前端视图，HTML与JS代码，成功上传后，返回图片真实地址并绑定到的SRC地址

复制代码 代码如下 :

Enfin, voici un autre exemple de téléchargement d'images avec paramètres : code contrôleur :

Copier le code Le code est le suivant :

classe publique HomeController : Contrôleur
{
         Index ActionResult public()
            {
              return View();
>

Téléchargement public ActionResult()
            {
                NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
               string imgPath = "";
Si (hfc.Count > 0)
                {
imgPath = "/testUpload" hfc[0].FileName;
                     string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
            }
//Attention à noter les deuxième et troisième paramètres
                return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
>
>

Code d'affichage de l'index :

Copier le code Le code est le suivant :

Cet exemple affiche l'image téléchargée de manière asynchrone et affiche en même temps les paramètres de transmission personnalisés. Cet exemple

Adresse de téléchargement

Le 28 janvier 2013, un problème a été découvert lors du processus de débogage aujourd'hui, c'est-à-dire qu'en tant que champ de fichier (), il doit avoir un attribut de nom s'il n'y en a pas. attribut name, le serveur obtiendra le Non illustré. Par exemple : la manière correcte d'écrire est

Le 28 janvier 2013, la cause de l'erreur la plus classique a enfin été trouvée. La fonction objet (a,b){return new e.fn.init(a,b,h)} n'a pas de méthode 'handleError'. C'est une erreur signalée par le navigateur Google. Elle est très classique, je ne sais pas si. c'est mon problème de version ou pas. Le vrai problème. La cause première de ce problème a été trouvée après N téléchargements. La réponse est : le paramètre dataType doit être en lettres majuscules. Par exemple : dataType : 'HTML'.