Detaillierte Einführung in das jQuery-Plug-in zum asynchronen Datei-Upload ajaxFileUpload_jquery

1. ajaxFileUpload ist ein jQuery-Plugin zum asynchronen Hochladen von Dateien.

Laden Sie eine Version hoch, die ich nicht kenne, damit Sie in Zukunft nicht überall danach suchen müssen.

Syntax: $.ajaxFileUpload([Optionen])

Optionsparameterbeschreibung:

1. URL-Upload-Handler-Adresse. ​
2. fileElementId　　　 Die ID des Dateifelds, das hochgeladen werden muss, d. h. die ID von .
3. secureuri Gibt an, ob die sichere Übermittlung aktiviert werden soll. Der Standardwert ist false.
4. dataType Der vom Server zurückgegebene Datentyp. Kann XML, Skript, JSON, HTML sein. Wenn Sie es nicht ausfüllen, wird es von jQuery automatisch ermittelt.
5. Erfolg ist eine Verarbeitungsfunktion, die nach erfolgreicher Übermittlung automatisch ausgeführt wird. Die Parameterdaten sind die vom Server zurückgegebenen Daten.
6. Fehler Eine Verarbeitungsfunktion, die automatisch ausgeführt wird, wenn die Übermittlung fehlschlägt.
7. Daten Benutzerdefinierte Parameter. Dieses Ding ist nützlicher, wenn Daten zum hochgeladenen Bild vorhanden sind.
8. Geben Sie Folgendes ein: Wenn Sie benutzerdefinierte Parameter übermitteln möchten, muss dieser Parameter auf „post“ eingestellt sein

Fehlermeldung:

1, SyntaxError: fehlt; vor Anweisungsfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob auf den URL-Pfad zugegriffen werden kann
2. SyntaxError: Syntaxfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob im Hintergrundhandler des Servers, der den Übermittlungsvorgang
verarbeitet, ein Syntaxfehler vorliegt 3. SyntaxError: Fehler wegen ungültiger Eigenschafts-ID
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob die Textfeld-Attribut-ID vorhanden ist
4. SyntaxError: fehlt } im XML-Ausdrucksfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob der Dateiname konsistent ist oder nicht existiert
5. Andere benutzerdefinierte Fehler
Sie können die Variable $error zum direkten Drucken verwenden, um zu überprüfen, ob jeder Parameter korrekt ist. Dies ist viel praktischer als die oben genannten Aufforderungen zu ungültigen Fehlern.

Verwendung:

Schritt eins: Führen Sie zunächst die Plug-Ins jQuery und ajaxFileUpload ein. Achten Sie selbstverständlich auf die Reihenfolge.

Code kopieren Der Code lautet wie folgt:

Schritt 2: HTML-Code:

Code kopieren Der Code lautet wie folgt:

Schritt 3: JS-Code

Code kopieren Der Code lautet wie folgt:

Schritt 4: Backend-Seite upload.aspx-Code:

Code kopieren Der Code lautet wie folgt:

protected void Page_Load(object sender, EventArgs e)
        {
            HttpFileCollection files = Request.Files;
            string msg = string.Empty;
            string error = string.Empty;
            string imgurl;
            if (files.Count > 0)
            {
                files[0].SaveAs(Server.MapPath("/") System.IO.Path.GetFileName(files[0].FileName));
                msg = " 成功! 文件大小为:" files[0].ContentLength;
                imgurl = "/" files[0].FileName;
                string res = "{ error:'" error "', msg:'" msg "',imgurl:'" imgurl "'}";
                Response.Write(res);
                Response.End();
            }
        }

本实例完整代码下载

来一个MVC版本的实例:

控制器代码

复制代码 代码如下:

öffentliche Klasse HomeController: Controller
    {
        öffentlicher ActionResult Index()
        {
            return View();
        }

        public ActionResult Upload()
        {
            HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
            string imgPath = "";
            if (hfc.Count > 0)
            {
                imgPath = "/testUpload" hfc[0].FileName;
                string PhysicalPath = Server.MapPath(imgPath);
                hfc[0].SaveAs(PhysicalPath);
            }
            return Content(imgPath);
        }
    }

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

复制代码 代码如下:

Zum Schluss noch ein Beispiel für das Hochladen von Bildern mit Parametern: Controller-Code:

Code kopieren Der Code lautet wie folgt:

öffentliche Klasse HomeController: Controller
{
         public ActionResult Index()
            {
              return View();
}

public ActionResult Upload()
            {
                NameValueCollection nvc = System.Web.HttpContext.Current.Request.Form;

HttpFileCollection hfc = System.Web.HttpContext.Current.Request.Files;
               string imgPath = "";
Wenn (hfc.Count > 0)
                {
imgPath = "/testUpload" hfc[0].FileName;
                     string PhysicalPath = Server.MapPath(imgPath);
hfc[0].SaveAs(PhysicalPath);
            }
//Achten Sie darauf, den zweiten und dritten Parameter aufzuschreiben
                return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
}
}

Indexansichtscode:

Code kopieren Der Code lautet wie folgt:

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'.