Heim  >  Artikel  >  Web-Frontend  >  Ein einfaches jQuery-Plug-in ajaxfileupload.js implementiert die Ajax-Upload-Datei example_jquery

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

WBOY
WBOYOriginal
2016-05-16 16:43:121416Durchsuche

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

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

Stellungnahme:
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