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

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:

98a409b4e0dd20993c98e99a88ced0d82cacc6d41bbb37262a98f745aa00fbf0 c1a507ce4e25efe7d9a05acf2ed209252cacc6d41bbb37262a98f745aa00fbf0

2. HTML-Teil

Code kopieren Der Code lautet wie folgt:

89b25275b4a8bb4532c41a2aa8161b05 11091c232b6ac165cead5133eec293a5 bec745fb82b804114c56a91be37fec35Upload65281c5ac262bf6d81768915a4a77ac0

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:

cc59bea3adee72cab5ddc898397ea2f4 ...Zugehöriger HTML-Code... f5a47148e367a6035fd7a2faa965022e 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> 

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();
 }
}

Code kopieren

Der Code lautet wie folgt:

100db36a723c770d327fc0aef2ce13b1
e9555486250174416558e032b95cc144
0c54930bea48f598f730c6be244850d72cacc6d41bbb37262a98f745aa00fbf0
         a787e67392ba4615922d8cf7af8591d02cacc6d41bbb37262a98f745aa00fbf0

403ba42e35e861dfd7d2451e2e7c4bca
        4ec11beb6c39d0703d1751d203c17053
            Funktion ajaxFileUpload(){
$.ajaxFileUpload(
                                                       {
URL: 'update.do? Method = uploader', // muss auf die Serveradresse verlinken
secureuri:false,
FileElementid: 'Housemaps', // Das ID-Attribut des Dateiauswahlfelds
Datentyp: 'xml',                             Erfolg: Funktion (Daten, Status)                                                                                                                                                                                                                                                                                                                                                                   $('#result').html('Erfolgreich hinzugefügt');
                 },
Fehler: Funktion (Daten, Status, e) // Äquivalent                                                {
                            $('#result').html('Hinzufügen fehlgeschlagen');
                }
            }
                                                                          );
                                                                                    }
2cacc6d41bbb37262a98f745aa00fbf0
9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d
4f7c1c4f3817cddbce80001f30d8155d            5481467d3c96c8c4e590f8e17fa2b649
f5a47148e367a6035fd7a2faa965022e ca7204e18f1cb9313f7d7fb65b59687216b28748ea4df4d9c2150843fecfba68
 
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e



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