Heim > Web-Frontend > js-Tutorial > Hauptteil

Ein einfaches jQuery-Plug-in ajaxfileupload.js implementiert die Ajax-Upload-Datei example_jquery

WBOY
Freigeben: 2016-05-16 16:43:12
Original
1445 Leute haben es durchsucht

Das jQuery-Plugin AjaxFileUpload kann das Hochladen von Ajax-Dateien realisieren. Das Plug-in ist sehr einfach zu verwenden. Erfahren Sie zunächst, wie Sie das AjaxFileUpload-Plugin richtig verwenden, und lernen Sie dann einige häufige Fehlermeldungen und Lösungen kennen.

Gebrauchsanweisung

Es müssen die jQuery-Bibliotheksdatei und die AjaxFileUpload-Bibliotheksdatei verwendet werden

Anwendungsbeispiele

1, einschließlich des Dateiteils

Code kopieren Der Code lautet wie folgt:



2. HTML-Teil



Es werden nur drei Elemente benötigt, ein dynamisches Ladesymbol, ein Dateifeld und eine Schaltfläche
Hinweis: Für die Verwendung des AjaxFileUpload-Plug-Ins zum Hochladen von Dateien ist kein Formular erforderlich, wie folgt:
...Zugehöriger HTML-Code...
Weil das AjaxFileUpload-Plug-in automatisch ein Formular zur Formularübermittlung generiert.


Für die Dateidomänen-ID und den Dateinamen muss der fileElementId-Parameter des ajaxFileUpload-Plug-Ins die Dateidomänen-ID abrufen. Wenn Sie den Datei-Upload-Vorgang verarbeiten, müssen Sie den Dateidomänennamen kennen, um die hochgeladene Datei zu erhalten Dateiinformationen. Die Beziehung zwischen den beiden muss klar sein.


3, Javascript-Teil

Hauptparameterbeschreibung: 1. URL stellt den Dateipfad für die Verarbeitung von Datei-Upload-Vorgängen dar. Sie können wie oben testen, ob auf die URL direkt zugegriffen werden kann: upload.php 2. fileElementId stellt die Dateidomänen-ID dar, wie oben: fileToUpload

3. Ob Secureuri die sichere Übermittlung aktiviert, der Standardwert ist false
4. dataType-Daten, wählen Sie im Allgemeinen JSON, die ursprüngliche Ökologie von 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> 
Nach dem Login kopieren
5. Verarbeitungsfunktion nach erfolgreicher Übermittlung
6. Fehlerverarbeitungsfunktion


Es gibt oben zwei Methoden: die Funktion „loading()“ zum dynamischen Laden kleiner Symbole und die Funktion „$.ajaxFileUpload()“ zum Hochladen von Dateien, die der von uns verwendeten Funktion „jQuery.ajax()“ ähnelt. Sie ist sehr einfach zu verwenden , und ich habe es hier weggelassen. PHP verarbeitet hochgeladene Dateien, und so einfach ist es, das jQuery-Plug-in AjaxFileUpload zu verwenden, um Ajax-Dateien zu implementieren.

Gleichzeitig müssen wir die relevanten Fehlermeldungen kennen

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 überprüfen, ob Syntaxfehler in der PHP-Datei vorhanden sind, die den Übermittlungsvorgang verarbeitet

3, SyntaxError: Fehler aufgrund einer ungültigen Eigenschafts-ID

Wenn dieser Fehler auftritt, müssen Sie prüfen, ob die Attribut-ID vorhanden ist

4, SyntaxError: fehlt } im XML-Ausdrucksfehler

Wenn dieser Fehler auftritt, müssen Sie prüfen, ob der Dateidomänenname konsistent ist oder nicht existiert

5, andere benutzerdefinierte Fehler

Sie können die Variable $error verwenden, um direkt zu drucken, um zu überprüfen, ob jeder Parameter korrekt ist. Dies ist viel praktischer als die obigen Aufforderungen zu ungültigen Fehlern.

Die Verwendung des jQuery-Plug-ins AjaxFileUpload zum Hochladen von Dateien ohne Aktualisierung ist sehr praktisch. Aufgrund seiner Einfachheit und Benutzerfreundlichkeit hat dieses Plug-in im Vergleich zu anderen Datei-Upload-Plug-ins die größte Benutzerzahl sehr zu empfehlen.


Bearbeitungsseite:



Zusätzliche Kommentare von anderen Internetnutzern:

Seitencode:
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();
 }
}
Nach dem Login kopieren

Code kopieren

Der Code lautet wie folgt:





        


       

                      

 





Servercode:





Code kopieren

Der Code lautet wie folgt:


Die öffentliche Klasse UpdateAction erweitert DispatchAction {

    öffentlicher ActionForward-Uploader (ActionMapping-Zuordnung, ActionForm-Formular,
            HttpServletRequest-Anfrage, HttpServletResponse-Antwort) {
        UpFormForm upFormForm = (UpFormForm) form;
        FormFile ff = upFormForm.getHouseMaps();
        versuche es mit {
            InputStream ist = ff.getInputStream();
            Datei file = new File("D:/" ff.getFileName());            //指定文件存储的路径和文件名
            OutputStream os = new FileOutputStream(file);
           
            byte[] b = neues Byte[1024];
            int len ​​= 0;
            while((len = is.read(b)) != -1){
                os.write(b, 0, len);
            }
            os.close();
            is.close();
        } Catch (Ausnahme e) {
            e.printStackTrace();
           
        }
       
        return null;
    }
}

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage