jQuery-Plug-in ajaxFileUpload-js-Tutorial-php.cn

jQuery-Plug-in ajaxFileUpload

黄舟

Freigeben： 2016-12-13 11:41:22

Original

979 Leute haben es durchsucht

ajaxFileUpload ist ein jQuery-Plug-in zum asynchronen Hochladen von Dateien

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

Syntax: $.ajaxFileUpload([options])

Optionsparameterbeschreibung:

1.　　
2. fileElementId　　　 Die ID des Dateifelds, das hochgeladen werden muss, also die ID von .
3. secureuri 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　　　 Behandlungsfunktion, 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 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ein.　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Fehlermeldung:

1, SyntaxErr oder: fehlt ; vor Anweisungsfehler
Wenn dieser Fehler auftritt, müssen Sie überprüfen, ob der URL-Pfad vorhanden ist ist zugänglich
2, SyntaxError: Syntaxfehler
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob ein Syntaxfehler im Hintergrundhandler des Servers vorliegt, der den Übermittlungsvorgang verarbeitet
3, SyntaxError: Fehler aufgrund einer ungültigen Eigenschafts-ID
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob die Textfeldattribut-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 vorhanden
5. Andere benutzerdefinierte Fehler
Sie können die Variable $error direkt verwenden, um zu überprüfen, ob jeder Parameter korrekt ist. Dies ist viel praktischer als die oben genannten ungültigen Fehleraufforderungen.

So verwenden Sie:

Schritt 1: Stellen Sie zunächst die Plug-Ins jQuery und ajaxFileUpload vor. Achten Sie selbstverständlich auf die Reihenfolge.

<script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

Nach dem Login kopieren

Schritt 2: HTML-Code:

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

Nach dem Login kopieren

Schritt 3: JS-Code

<script src="jquery-1.7.1.js" type="text/javascript"></script>
    <script src="ajaxfileupload.js" type="text/javascript"></script>

Nach dem Login kopieren

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

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:&#39;" + error + "&#39;, msg:&#39;" + msg + "&#39;,imgurl:&#39;" + imgurl + "&#39;}";
                Response.Write(res);
                Response.End();
            }
        }

Nach dem Login kopieren

Nehmen wir ein Beispiel der MVC-Version:

Controller-Code

public class HomeController : Controller
    {
        public 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);
        }
    }

Nach dem Login kopieren

Front-End-Ansicht, HTML- und JS-Code geben nach erfolgreichem Upload den Originalcode zurück Bildadresse und binden Sie es an die SRC-Adresse von



    
    
    

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

Nach dem Login kopieren

. Zum Schluss hier ein Beispiel für das Hochladen eines Bildes mit Parametern: Controller-Code:

public class 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 = "";
            if (hfc.Count > 0)
            {
                imgPath = "/testUpload" + hfc[0].FileName;
                string PhysicalPath = Server.MapPath(imgPath);
                hfc[0].SaveAs(PhysicalPath);
            }
            //注意要写好后面的第二第三个参数
            return Json(new { Id = nvc.Get("Id"), name = nvc.Get("name"), imgPath1 = imgPath },"text/html", JsonRequestBehavior.AllowGet);
        }
    }

Nach dem Login kopieren

Indexansicht Code:



    
    
    

<body>
    <p><input type="file" id="file1" name="file" /></p>
    <input type="button" value="上传" />
    <p><img id="img1" alt="上传成功啦" src="" /></p>
</body>

Nach dem Login kopieren

In diesem Beispiel wird das asynchron hochgeladene Bild angezeigt und gleichzeitig werden die benutzerdefinierten Übertragungsparameter angezeigt.