Ajax File Upload - Prozente werden nicht richtig angezeigt

Hookah

Mit 3.6 ist es ja auch möglich Dateien per Ajax zu senden.

Hab dann bei hacks.mozilla mal vorbeigeschaut und mir was zusammen gebastelt.
Der Upload funktionert soweit nur leider wird die Anzeige für die Prozente nur einmal aktualiesiert und
dann nichtmal mit 100 % sondern immer etwas zwischen 19 und 40% aber das Bild wurde fehlerfrei hochgeladen.
Ich hab mich auch an dem Quelltext von http://demos.hacks.mozilla.org/openweb/uploadingFiles/ gehalten bzw mir
das Javascript angeschaut : http://demos.hacks.mozilla.org/openweb/uploadingFiles/main.js

Warum funktioniert das denn nun nicht?
Jemand eine Idee?

Falls wer fragen möchte warum ich hier frage: Ich hab gelesen das es zur Zeit nur mit dem FF funktioniert also
dacht ich mir post ich das mal hier.

Leider habe ich keine Beispiel PHP Datei gefunden ausser eine und nach dessen weg bin ich dann auch gegangen.
Ich weiss leider nicht ob es auch was damit zu tun haben kann!

Mein Uploadscript schaut so aus:

Code

var maxSize = 3597152;


   var boundary = '------multipartformboundary' + (new Date).getTime();
    var dashdash = '--';
    var crlf     = '\r\n';






function handleFile(file) {
    // RegExp for JPEG mime type
    var imageType = /image\/jpeg/;
 
    // Check if match
    if (!file.type.match(imageType)) {
        return false;
    }
   // Check if the picture exceeds set limit
   if(file.size > maxSize) {
      alert("Choose a smaller photo!");
      return false;
   }


  return true;
}






function upload_pic(){


var files = document.getElementById("inputFiles").files;


if(handleFile(files[0])){








		  var builder = '';


		  builder += dashdash;
    		  builder += boundary;
  		  builder += crlf;


		 builder += 'Content-Disposition: form-data; name="up"';

		 builder += '; filename="' + files[0].fileName + '"';


		builder += crlf;


        builder += 'Content-Type: application/octet-stream';
        builder += crlf;
        builder += crlf; 


        /* Append binary data. */
        builder += files[0].getAsBinary();
        builder += crlf;




	builder += dashdash;
	builder += boundary;
	builder += crlf;


	builder += dashdash;
	builder += boundary;
	builder += dashdash;
 	builder += crlf;




	var xhr = new XMLHttpRequest();


		xhr.upload.addEventListener("progress", function(e) {
 		 if (e.lengthComputable) {
 		   var percentage = Math.round((e.loaded * 100) / e.total);



		   document.getElementById('progress').innerHTML = percentage+'%';
			}
		}, false);






	xhr.open("POST", "kontakt_pic.php");
	xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' 
        + boundary);


	xhr.overrideMimeType('text/plain; charset=x-user-defined-binary;');


	








	xhr.sendAsBinary(builder);


	
	}
}

Alles anzeigen

var builder ist leider notwendig da ich sonst im PHP Script die Datei nicht bekomme (weil ich nicht weiss wie es geht
wenn ich nur xhr.sendAsBinary(files[0].getAsBinary()); benutzt)

Durch builder kann ich den Namen des Uploadfeldes angeben womit ich dann im PHP Script die Datei weiter verarbeiten kann.

Das Script sieht simpel so aus:

PHP

<?php


$files = $_FILES['up']['tmp_name'];


$imgtype =getimagesize($files);




switch($imgtype[2]){


case "1":


	


	$name = uniqid().".gif";


	
	break;


case "2":


	


	$name = uniqid().".jpg";


	break;


case "3":


	


	$name = uniqid().".png";


	break;


} 






$ziel = "t-bone/".$name;


move_uploaded_file  ( $files  , $ziel );


?>

Alles anzeigen

Wie müsste ich das denn machen wenn ich einfach xhr.sendAsBinary(files[0].getAsBinary()); benutzen möchte?

Vielleicht bin ich auch nur zu blöd um es zu finden.

Helft mir auf die Sprünge bitte

Schönen Nachmittag wünsch ich

Edit: Ich teste das ganze mit FF 3.6 auf Windows unter xampp

boardraider

Zitat

weil ich nicht weiss wie es geht wenn ich nur xhr.sendAsBinary(files[0].getAsBinary()); benutzt

Einfaches Upload-Formular mit Preview analog zum Mozilla-Beispiel:
upload.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html>
<head>
<title>Upload</title>
<script src="script.js"></script>
</head>
<body>
<input type="file" multiple="" id="select" onchange="previewFiles(this.files)"/>
<input id="upload" value="Upload" type="button" />
<p id="progress"></p>
<p id="preview"></p>
</body>
</html>

Alles anzeigen

Gegenüber dem Mozilla-Beispiel leicht modifiziert:
script.js

Code

var sel, prog, but, prev;


function init() {
    sel = document.getElementById("select");
    prog = document.getElementById("progress");
    but = document.getElementById("upload");
    prev = document.getElementById("preview");
    but.addEventListener("click", up, false);
}


function up(e) {
    e.preventDefault();
    var files = sel.files;
    sendFiles(files);
}


function previewFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;


        if (!file.type.match(imageType)) continue;


        var img = document.createElement("img");
        img.file = file;
        prev.appendChild(img);
        var reader = new FileReader();
        reader.onloadend = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
        reader.readAsDataURL(file);
    }


}


function FileUpload(mime, bin) {
    this.ctrl = prog;
    var xhr = new XMLHttpRequest();


    var self = this;
    xhr.upload.addEventListener("progress", function(e) {
            if (e.lengthComputable) {
                var percentage = Math.round((e.loaded * 100) / e.total);
                self.ctrl.innerHTML = percentage + " %";
            }
    }, false);


    xhr.upload.addEventListener("load", function(e){
            self.ctrl.innerHTML = "100 %";
            }, false);


    xhr.open("POST", "process.php");
    xhr.setRequestHeader('Content-Type', mime);
    xhr.sendAsBinary(bin);
}


function sendFiles(files) {
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imageType = /image.*/;


        if (!file.type.match(imageType)) continue;


        var reader = new FileReader();
        reader.onloadend = (function(aImg) { return function(e) { new FileUpload(aImg.type, e.target.result); }; })(file);
        reader.readAsBinaryString(file);
    }
}


window.addEventListener("load", init, true);

Alles anzeigen

Die Preview ist analog zum Mozilla-Beispiel, die Fortschrittsanzeige ist lediglich ein String in einem p-Element. Letzteres läuft aber sauber durch, wenn auch für kleine Dateien kaum zu sehen.
Die Datei wird nur der Einfachheit halber beim Senden nochmal von der Platte geholt. Dabei übergebe ich statt dem Bild für das Update der Preview-Ansicht (nicht benötigt) einfach den MIME-Type an FileUpload(). Selbiger wird dann als Content-Type-Header mitgeschickt, damit ihn der Server verarbeiten kann.

Dein PHP-Skript abgewandelt:
process.php

PHP

<?php
switch($_SERVER['CONTENT_TYPE']){
case "image/gif":
   $name = uniqid().".gif";
   break;
case "image/jpeg":
   $name = uniqid().".jpg";
   break;
case "image/png":
   $name = uniqid().".png";
   break;
}
file_put_contents($name, file_get_contents("php://input"));
?>

Alles anzeigen

Den Content-Type über die Header-Variablen auslesen, daraus den Dateinamen nach deinem Muster generieren und den POST-Body direkt in die Datei schreiben.