Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Problem mit Dateiupload (Ajax + Mehrfachauswahl)

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Problem mit Dateiupload (Ajax + Mehrfachauswahl)

    Hey Leute,

    ich versuche gerade einen Dateiupload via Ajax zu realisieren. Leider hackt es etwas an meinen JS Kenntnissen.

    Code:
    $(document).ready(function(){
    
    	$("input[name=file]").on('change', function(){
    
    			var form_action = $("input[name=form_action]").val();
    									
    			var file = new FormData();
    				file.append('form_action', form_action);
    				file.append('datei_name', this.filename);
    			
    			if(this.files.length == 1){
    				$("div#message").append('</br> Bild' + this.files[0].name +' übertragen </br>');
    				file.append('file', this.files[0]);
    								
    			}
    			else if(this.files.length > 1){
    				$("div#message").append("</br> Mehrfachauswahl</br>");
    				
    				for(var i = 0; i < this.files.length; i++){
    					$("div#message").append("Bild "+ i + "Name  " + this.files[i].name + " Dateigröße" + this.files[i].size + "</br>");
    					file.append('file', this.files[i]);
    				}
    			}
    						
    			$.ajax({
    				url: "upload.php",
    				type: "POST",
    				data: file,
    				processData: false,
            		contentType: false,
    				success: function(){
    					$("div#message").append("Datei(n) übertragen </br>");
    				}
    			})
    		return false;
    	})
    })
    Der Upload einer einzelnen Datei funktioniert ohne Probleme, wenn ich jedoch mehrere Dateien auswähle, wird jeweils nur die letzte Datei übertragen. Ich bin mir recht sicher, das Problem hierbei gefunden zu haben.
    Code:
    file.append('file', this.files[i]);
    Vom Prinzip her, überschreibe 'file' immer wieder mit dem letzten Bildinformationen. Kann mir jemand sagen, wie 'file' die Variable i mit anhänge, so das 'file'+i an das FormData angehangen wird?

  • #2
    mach doch bitte nen fiddle draus

    Kommentar


    • #3
      Gern, wenn das hilft..

      http://jsfiddle.net/Moonblood/y3ow955a/

      Kommentar


      • #4
        http://jsfiddle.net/y3ow955a/1/
        [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

        Kommentar


        • #5
          so schnell hab ich mich nicht eingelogged beim fiddle, tkausl.
          der unterschied liegt in
          a.) file.append('file[]', this.files[0]); und
          b.) im externen jquery 2.x (edge) eingebunden über framework und extensions
          hab ich was übersehen?

          Kommentar


          • #6
            @tkausl, moma habt vielen Dank!! =)

            Jetzt funktioniert die Sache und ich sollte mir eindeutig noch mal die JS Grundskills anschauen..

            Merci...

            Kommentar


            • #7
              Zitat von moma Beitrag anzeigen
              so schnell hab ich mich nicht eingelogged beim fiddle, tkausl.
              der unterschied liegt in
              a.) file.append('file[]', this.files[0]); und
              b.) im externen jquery 2.x (edge) eingebunden über framework und extensions
              hab ich was übersehen?
              Das file.append('file[]', this.files[i]); etwas weiter unten noch, ansonsten korrekt.
              [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

              Kommentar


              • #8
                Ich hätte mal noch eine weiterführende Frage.

                Hintergrund, ich würde gern den Fileupload um eine Vorschau-Funktion erweiteren.
                Dazu habe ich ein Div mit der ID "Message" vorgesehen.

                http://jsfiddle.net/Moonblood/y3ow955a/2/

                Mein Ansatz war die Eigenschaft .mozFullPath zu nutzen. Wenn ich mit dem DOM Inspector diese Eigenschaft anschaue, dann besitzt diese den vollen Pfad vom jeweils ausgewählten Bild. Die Ausgabe via console.log leifert jedoch einen Leerstring?

                Kommentar


                • #9
                  Hallöchen,

                  wenn du vom Nutzer ausgewählte Dateien auslesen willst um bspw. Vorschaubilder anzuzeigen oder die Daten anderweitig auszuwerten, greift dir die FileReader-API unter die Arme.

                  Viele Grüße,
                  lotti
                  [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                  Kommentar


                  • #10
                    @Lottikarotti vielleicht hast du ja Lust, mir ein paar Fragezeichen zu nehmen? =)

                    Ich habe im Netz ein Beispiel zur FileReader API gefunden. Jedoch muss ich sagen, mit meinen JavaScript Skills kann ich mir einiges vom Beispiel nicht beantworten.

                    Hier erst mal den Link zum Beispiel Script.
                    http://www.html5rocks.com/de/tutorials/file/dndfiles/

                    Meine Fragen dazu..
                    Code:
                    function handleFileSelect(evt){    
                    
                    var files = evt.target.files;
                    
                    }
                    1. der Funktionsaufruf, wieso wird evt übergeben?
                    2. evt.target.files <-- was genau passiert hier? files sind die Dateien welche als Array übergeben werden, richtig? Dann werden also mittels .target an evt die Files gebunden?
                    Vielleicht kennt ja jemand hier ein Beispiel, in dem Eventbindung Anfänger kompatibel erklärt wird? Im Netz finde ich meist nur, wie ich Events erstelle. Nach dem Motto..
                    $("#id").on('click', functionXY);

                    Code:
                          reader.onload = (function(theFile) {
                            return function(e) {
                              // Render thumbnail.
                              var span = document.createElement('span');
                              span.innerHTML = ['<img class="thumb" src="', e.target.result,
                                                '" title="', escape(theFile.name), '"/>'].join('');
                              document.getElementById('list').insertBefore(span, null);
                            };
                          })(f);
                    Diesen Codebereich verstehe ich leider nicht wirklich, vielleicht wäre es möglich dies etwas näher zu erläuern?

                    Kommentar


                    • #11
                      Zu 1:
                      Code:
                      document.getElementById('files').addEventListener('change', handleFileSelect, false);
                      handleFileSelect ist ein Event-Handler. Event-Handlern wird beim Aufruf automatisch ein Event-Objekt übergeben. Das ist grundsätzlich so bei Events. Darin befinden sich die eventbezogenen Daten.

                      Zu 2:
                      target ist das Ziel-Element des Events. Also in dem Fall das <input type="file"> Element.

                      Siehe auch: https://developer.mozilla.org/de/doc...b_applications
                      Dort heißt es: "The File API makes it possible to access a FileList containing File objects representing the files selected by the user."

                      files sind die Dateien welche als Array übergeben werden, richtig?
                      Sozusagen, eben "FileList containing File objects representing the files".

                      Dann werden also mittels .target an evt die Files gebunden?
                      So kann man es möglicherweise ausdrücken. Ich weiß zwar nicht ob du wirklich das richtige denkst aber die Antwort auf die Frage lautet: Ja.

                      Dir fehlt Grundlagenwissen bezüglich Events. Möglicherweise ist das hier nicht der richtige Ort das zu erklären. Hier soll eigentlich lediglich Hilfe zur Selbsthilfe gegeben werden. Als Lektüre daher vielleicht das hier lesen:
                      http://molily.de/js/event-handling-grundlagen.html
                      http://molily.de/js/event-handling-fortgeschritten.html (die Anmerkungen zur IE-Kompatibilität sind für dich wohl erst mal irrelevant)

                      Vielleicht kennt ja jemand hier ein Beispiel, in dem Eventbindung Anfänger kompatibel erklärt wird? Im Netz finde ich meist nur, wie ich Events erstelle. Nach dem Motto..
                      $("#id").on('click', functionXY);
                      Es gibt verschiedene Arten. Die sollten in den beiden verlinkten Dokumenten erläutert werden. on(), click() etc. sind übrigens jQuery-spezifische Methoden. Sie sind Hilfsmethoden die letztlich auch nur pures JS-beinhalten.

                      Kommentar


                      • #12
                        @monolith vielen Dank für deine Antwort. Damit kann ich etwas anfangen, ich schau mir gleich mal die Grundlagen an. Hab vielen Dank..

                        Kommentar


                        • #13
                          Das ist der Spirit!

                          Kommentar


                          • #14
                            @Monolith, die Grundlagen werden dort wirklich klasse erklärt. Thx noch mal für deinen Tipp, hat mir wirklich sehr gut geholfen..

                            Nun gut, ich werde sicher noch das ein oder andere üben müssen was JS betrifft.

                            Vielleicht kann sich ja noch mal jemand meinen aktuellen Stand anschauen? Das FileReader Object functioniert nun mehr oder weniger, jedoch wird nur das letzte Bild einer Auswahl dargestellt.

                            Mein Firebug zeigt mir folgende Ausgaben (via console.log) an..



                            Der Fiddle dazu...
                            http://jsfiddle.net/Moonblood/y3ow955a/2/

                            Wenn ich mir die Ausgaben im FB anschaue, dann wird schnell klar, dass der Reader in der korrekten Anzahl der Bilder erzeugt wurde, aber lediglich mit der letzten Bild (im Beispiel i = 4) durchlaufen wird? Wie kann das möglich sein, immer hin erzeuge ich den Reader innerhalb einer Forschleife???

                            Kommentar


                            • #15
                              Hmm ich hab das Thema nun ganz anders gelöst, über URL.createObjectURL. Bin erstaunt wie einfach letztlich dieser Ansatz war.

                              Ich poste mal den Code, muss nur noch der Ajax Upload rein, File Auswahl via Drag and Drop.
                              HTML
                              Code:
                              <!DOCTYPE HTML>
                              <html>
                              <head>	
                              	<meta charset="utf-8">
                              	<title>File Upload - AJAX - FileReader - drop able</title>
                              	<script type="text/javascript" src="includes/jquery-2.1.1.js"></script>
                              	<script type="text/javascript" src="includes/script.js"></script>
                              	<link href="includes/styles.css" type="text/css" rel="stylesheet">
                              </head>
                              <body>
                              	<span id="left_content">
                              		<div id="drop_zone_title" class="border_top">Drop Area</div>
                              		<div id="drop_zone"></div>
                              		<div id="drop_zone_start" class="border_bottom">upload</div>
                              	</span>
                              	<span id="right_content">
                              		<div id="file_list"></div>
                              	</span>
                              	
                              </body>
                              </html>
                              CSS
                              Code:
                              body{ font-family: Consolas; }
                              
                              /*Style for drop Zone */
                              span#left_content{float: left;}
                              span#right_content{float: left; width: 50%; }
                              .border_top{ -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius:  4px 4px 0px 0px; border-radius:  4px 4px 0px 0px;}
                              .border_bottom{ -webkit-border-radius: 0px 0px 4px 4px; -moz-border-radius: 0px 0px 4px 4px; border-radius: 0px 0px 4px 4px;}
                              
                              .thumb_container {width: auto; border-bottom: 1px solid #cdcdcd; margin: 2% 0; } /* Container für Thumb Informationen (Bild + Bild-Details) */
                              .thumb_details { float: left; margin-top: 0%; font-size: 80%; } /* die File Details */
                              .thumb_pic {width: 15%; height: 15%; float: left; } /* das Bilb selbst */
                              .clearfix { clear: both; }
                              
                              div#file_list ul {list-style-type: none}
                              div#drop_zone_title, div#drop_zone_start{ width: 408px; background-color: orange; color: #fff; font-weight: bold; text-align: center; padding: 1% 0;}
                              div#drop_zone_start:hover { background-color: #cdcdcd; color: orange;}
                              div#drop_zone{ width: 400px; height: 400px; border-left: 4px solid orange; border-right: 4px solid orange; }
                              div#file_list{ background-color: orange; width: auto; }
                              JavaScript (jQuery bei diesem Ansatz nicht von nöten)
                              Code:
                              $(document).ready(function(){
                              	
                              	// Events
                              	document.getElementById("drop_zone").addEventListener('dragover', handleDragOver, false);
                              	document.getElementById("drop_zone").addEventListener('drop', handleFileSelect, false); 
                              	
                              	//dragover event is fired when an element or text selection is being dragged over a valid drop target
                              	//drop event is fired when an element or text selection is dropped on a valid drop target.
                              	
                              	function handleDragOver(evt){
                              		
                              		evt.stopPropagation(); // stopt das bubbling, also das aufsteigen des Events
                              		evt.preventDefault(); // unterbindet die Standart Reaktion des Browser auf eintretten des Ereignisses
                              		evt.dataTransfer.dropEffect = 'copy';
                              		
                              		// dataTransfer Object hält die Daten beim Drag and Drop
                              		// dropEffect Objecteigenschaft vom Object dataTransfer -->A copy of the source item is made at the new location
                              		// https://developer.mozilla.org/de/docs/Web/API/DataTransfer <-- dataTransfer
                              
                              	}
                              	
                              	function handleFileSelect(evt){
                              		
                              		evt.stopPropagation(); // stop bubbling
                              		evt.preventDefault(); // stop Standart Aktion 
                              		
                              		var files = evt.dataTransfer.files || window.event.srcElement.files; // FileList 
                              		
                              		var ausgabe = document.getElementById("file_list");
                              			ausgabe.innerHTML = files.length +" Dateien wurden ausgewählt";
                              				
                              		for(var i = 0; i < files.length; i++){
                              			
                              			console.log("Durchlauf => "+i);
                              			
                              			// div mit der ID = files[i].name
                              			var file_container = document.createElement("div");
                              				file_container.className = "thumb_container";
                              				file_container.id = files[i].name; // container bekommt name des Bildes als id
                              			
                              			ausgabe.appendChild(file_container); // container an #file_list				
                              			
                              			// Details nun an thumb_target
                              			var thumb_target = document.getElementById(files[i].name);
                              			
                              			// erzeugt eine URL die auf des Bild verweist
                              			var file_url = window.URL.createObjectURL(files[i]);
                              			
                              			// erzeugtes <span> Element zeigt die Dateiinformationen an im Element #file_list
                              			var img = document.createElement("img");
                              				img.className = "thumb_pic";
                              				img.name = files[i].name;
                              				img.src = file_url;
                              			
                              			// Auswahl des zuvor erstellten Div Elementes (id = files[i].name)
                              			
                              			thumb_target.appendChild(img);
                              			
                              			var date = new Date(files[i].lastModified);
                              											
                              			var ul = document.createElement("ul");
                              				ul.className = "thumb_details";
                              				ul.innerHTML = "<li> Dateiname: "+ files[i].name+"</li>";
                              				ul.innerHTML += "<li> Dateigröße: "+ files[i].size+"KB</li>";
                              				ul.innerHTML += "<li> last modified: "+ date +"</li>";
                              				ul.innerHTML += "<li> Datei-Typ: "+ files[i].type+"</li>";
                              			
                              			thumb_target.appendChild(ul);
                              							
                              			// Clear fix Element
                              			var clearfix = document.createElement("div");
                              				clearfix.className = "clearfix";
                              				
                              			thumb_target.appendChild(clearfix);
                              			
                              							
                              		} 
                              		
                              	} 
                              	
                              })
                              Vielleicht nützt es zu gegebener Zeit jemand anderen etwas..

                              Noch mals vielen Dank für die Tipps und Hinweise der Anderen.

                              Kommentar

                              Lädt...
                              X