Wie lade ich Dateien in Angularjs hoch? Ausführliche Erklärung zum Hochladen von Dateien in AngularJS mit ng-file-upload

In diesem Artikel wird hauptsächlich das Hochladen von AngularJS-Dateien vorgestellt. Werfen wir nun einen Blick auf diesen Artikelng-file-upload

angular-file-upload ist ein leichtes AngularJS-Datei-Upload-Tool, das das FileAPI-Polyfill-Design des Browsers nicht unterstützt und HTML5 für verwendet Direkter Datei-Upload.

(Wenn Sie mehr erfahren möchten, besuchen Sie die chinesische PHP-Website

AngularJS-Entwicklungshandbuch , um mehr zu erfahren) Funktionen

Unterstützung des Upload-Fortschritts, beim Hochladen können Sie abbrechen oder abbrechen, Unterstützung für Datei-Drag-and-Drop (HTML5), Verzeichnis-Drag-and-Drop (Weikit), CORS,
• /

  -Methode PUT(html5)POST

unterstützt den browserübergreifenden Flash-Polyfill-FileAPI-Upload (
• und

  ) . Erlauben Sie Kunden, Dateien vor dem Hochladen zu überprüfen oder zu ändern. HTML5non-HTML5

Wenn der Inhaltstyp der Datei
• ist, wird das direkte Hochladen auf CouchDB, imgur usw. unterstützt. Unterstützen Sie Angular http

  /$upload.http() Fortschrittsereignisse für Anfragen. Weitere Informationen finden Sie unter #88 (Kommentar). POSTPUT

Separate Shim-Datei wird bei Bedarf für
• -Code geladen, d. h. kein Extra Load/Code, wenn Sie nur HTML5-Unterstützung benötigen (Beachten Sie, dass html5-shim.js immer noch verfügbar ist erforderlich für

  -Ereignis in non-HTML5-Browsern)progressHTML5

Leicht, verwenden Sie reguläres
• zum Hochladen (unterstützt Nicht-HTML5-Browser), also alle Angular-

  -Funktionen. $http$http

Ein Beispiel

Die erforderliche js-Datei kann hier heruntergeladen werden: https://github.com/danialfarid/ng-file-upload

     
    文件上传
     
    
    
    
    
          
                            
    
        uploadImg

Einfacher Test

Die in Daten gespeicherten Parameter sind die Parameter, die wir beim Hochladen von Dateien benötigen.

Das vollständige Beispiel wurde erfolgreich hochgeladen und auf der Seite in der Vorschau angezeigt.

public class UploadFile : IHttpHandler
    {        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";            var paras = context.Request.Params["data"];
            JObject jobj = JObject.Parse(paras);            string strUserName = jobj["username"].ToString();
            HttpFileCollection files = context.Request.Files;            if (files.Count > 0)
            {                var file = files[0];                string fileExt = Path.GetExtension(file.FileName);                string fileNewName = Guid.NewGuid() + fileExt;                string strRelativeDir = "/Upload/" + strUserName;                string strDir = context.Request.MapPath(strRelativeDir);                if (!Directory.Exists(strDir))
                {
                    Directory.CreateDirectory(strDir);
                }                string strSavePath = Path.Combine(strDir, fileNewName);
                file.SaveAs(strSavePath);
                context.Response.Write(Path.Combine(strRelativeDir, fileNewName));
            }
        }        public bool IsReusable
        {            get
            {                return false;
            }
        }

}

Zusammenfassung

Mit ng-file-upload kann sein sehr einfach. Gute Integration mit AngularJS. Bei der Verwendung habe ich nach Beispielen für das Hochladen von Dateien im Zusammenhang mit AngularJS gesucht. Wenn der Browser HTML5 unterstützt, kann es auch sehr praktisch sein, einen Fortschrittsbalken zu erstellen. Darüber hinaus unterstützt diese Komponente auch das Hochladen mehrerer Dateien. Jedem zu empfehlen.

Dieser Artikel endet hier (wenn Sie mehr sehen möchten, besuchen Sie die chinesische PHP-Website

AngularJS-Benutzerhandbuch

, um mehr zu erfahren). Sie können unten eine Nachricht hinterlassen. Stellen Sie Fragen.

Das obige ist der detaillierte Inhalt vonWie lade ich Dateien in Angularjs hoch? Ausführliche Erklärung zum Hochladen von Dateien in AngularJS mit ng-file-upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!