Heim > Artikel > Web-Frontend > 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
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<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
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 verarbeitet3, SyntaxError: Fehler aufgrund einer ungültigen Eigenschafts-ID
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob die Attribut-ID vorhanden ist
Wenn dieser Fehler auftritt, müssen Sie prüfen, ob der Dateidomänenname konsistent ist oder nicht existiert
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.
Bearbeitungsseite:
Zusätzliche Kommentare von anderen Internetnutzern:
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:
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:
ö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;
}
}