JS Upload

[paddy89]

Ok ich bin am verzweifel.

Ich habe vor ein kleines Uploadtool zu schreiben.

Mit Html und php kann ich einen Multi upload machen, das ist kein Thema, nur ist es um das zu koennen muss ich bei meiner Form action="upload.php" angeben, damit Html weis welches script ausgefuer werden soll. Ich werde deswegen aber immer auf meine upload.php weitergeleitet und das sollte nicht sein.

Wie es sein sollte: In meiner Form auf den Durchsuchenbutton klicken und dann die File auswaehlen, danach auf den Submitbutton klicken -> datei wird an meinen Server uebertragen ohne das weitergeleitet wurde oder das meine index.html neugeladen oder veraendert wurde.

Ich habe schon soviel gegooglet aber nix passendes gefunden.

Hoffe ihr koennt mir da weiterhelfen.

Danke Mfg patrick

 

[CPoly]

Die einfachste Lösung, die auch ohne JavaScript funktioniert ist, dass du als Ziel (target Attribut) deines Formulars ein verstecktes IFrame angibst.

 

[ComFreek]

Die Lösung mit dem verstecktem IFrame ist natürlich die einfachste.

Allerdings biete sich noch eine Lösung mit der neuen HTML 5 File API an. Aber a) wird das bei älteren Browsern nicht unterstützt, b) wahrscheinlich langsamer und c) müsstest du dein PHP-Skript umschreiben.

 

[paddy89]

Danke aber es sollte mit Javascript sein und ohne Iframe.

 

[ComFreek]

Okay, ich habe mal so ein kleines Skript geschrieben.

Das ganze funktioniert mit der neuen HTML 5 File API. Mit der kann man Dateien (u.a.) binär einlesen und dann mit einem XMLHttpRequest-Objekt (AJAX) abschicken bzw. hochladen.
Falls du damit noch nicht gearbeitet hast, könnte ich dir mein Tutorial empfehlen: Checksummen mit JavaScript & HTML 5 File API.

Vielleicht wird folgendes aber auch ein Tutorial...

Naja, zuerst etwas HTML:

<h1>File upload with JavaScript</h1>
    
<hr />
Status: <span id="status">Ready</span>
<hr />

<form action="" method="post">
  <input type="file" id="file_input" />
  <br />
  <button type="button" id="btnUpload">Upload with JS</button>
  <input type="submit" id="btnSubmit" value="Upload (normal)" />
</form>

Eigentlich brauchen wir keinen Form-Tag, aber es bietet sich an, wenn man später noch einen "echten" Abschick-Button implementieren möchte, wenn JS deaktiviert ist, oder die HTML 5 File API nicht unterstüzt wird.

Dann implementieren wir noch eine Wrapper-Funktion zum Lesen der Datei:

function updateProgress(evt)
{
  document.getElementById('status').innerHTML = "Status: Processing";
}
 
function errorHandler(evt)
{
  document.getElementById('status').innerHTML = "Status: Error ("+evt.target.error.code+")";
}

function readFile(file, callback)
{
  var reader = new FileReader();
  reader.onload = function(evt)
  {
    document.getElementById('status').innerHTML = "Ready";
    if (typeof callback=="function")
      callback(file, evt);
  };
  reader.onprogress = updateProgress;
  reader.onerror = errorHandler;
  reader.readAsBinaryString( file );
}

Kurz gesagt: readFile() erstellt ein neues FileReader-Objekt, verknüpft die Events onprogress, onerror und onload mit eigenen Funktionen. Bei Erfolg beim Einlesen wird die Callback-Funktion (2. Parameter) aufgerufen. Unter anderem auch mit dem Parameter evt der den binären String enthält (evt.target.result).
In meine oben genannten Tutorial ist die selbige Funktion, aber besser beschrieben.

Dann setzen wir den onclick-Eventhandler für den Button:

window.onload = function()
{          
  document.getElementById("btnUpload").onclick = function()
  {
    var input = document.getElementById("file_input");

    if ( typeof FileReader=="undefined" || !input.files)
    {
      alert("Your browser doesn't support the HTML 5 File API!");
      return;
    }
    if ( input.files.length < 1 )
    {
      alert("Please select a file!");
      return;
    }

Zuerst kommen ein paar Fehlerprüfungen, u.a. auf Support der HTML 5 File API und ob eine Datei ausgewählt wurde.

Danach wenden wir unsere eigene readFile()-Funktion an:

readFile(input.files[0], function(file, evt)
    {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function()
      {
        if (xhr.readyState==4 && xhr.status==200)
        {
          document.getElementById("status").innerHTML = xhr.responseText;
        }
      }
      
      xhr.open("POST", "js_file_upload.php");
      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhr.send("file="+evt.target.result);
    });
  }
}

Anhang anzeigen js_file_upload.zip