✔ Drag&Drop Upload

B

Bastelbasti

Grünschnabel
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
        <title>Bild-UPLOAD</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
{if}!isset($datei){/if}
<script type="text/javascript">
$(document).ready(function() {

        var uploadTarget = document.getElementById("uploader");

        uploadTarget.addEventListener("dragenter", dragenter, false);
        uploadTarget.addEventListener("dragleave", dragleave, false);
        uploadTarget.addEventListener("dragover" , dragover , false);
        uploadTarget.addEventListener("drop"     , drop     , false);

        function dragenter(e) {
                e.stopPropagation();
                e.preventDefault();
                $("#uploader").html("<br><img src='bilder/18_clock_five_24.gif' width='50'>");
                return false;
        }

        function dragover(e) {
                e.stopPropagation();
                e.preventDefault();
                return false;
        }

        function dragleave(e) {
                e.stopPropagation();
                e.preventDefault();
                $("#uploader").html("<br><br><br><br>Bild hier hin ziehen.");
                return false;
        }

        function drop(e) {
                e.stopPropagation();
                e.preventDefault();

                var dt                 = e.dataTransfer;
                var files         = dt.files;
                jQuery.each(files, function(){
                        var reader = new FileReader();
                        reader.onload = function(e) {
                            document.getElementById("bildcode").value=e.target.result;
                            document.forms['bild'].submit();
                            setTimeout('window.alert(\'Ein Fehler ist aufgetreten!\')', 10000)
                        };
                        reader.readAsText(this);
                });
                $("#uploader").html("<br><img src='bilder/18_clock_five_24.gif' width='50'><br><span stype='color:#fff;'>Uploadin...</span>");
                return false;
        }
});
</script>{endif}
</head>
<body bgcolor="#eee">
{if}!isset($datei){/if}
<div id="uploader" style="width:200px;height:200px;background:#000;color:#FFF;text-align:center;"><br><br><br><br>Bild hier hin ziehen.</div>
<div id="showUpload"></div>
<form method="post" name="bild" action="bupload.html">
<input type="hidden" name="admin" value="1">
<input type="hidden" name="bildcode" value="" id="bildcode">
</form>
{else}
<input type="text" value="{$datei}" size="50">
<img src="{$datei}" alt="{$datei}" title="{$datei}" border="0" width="300">
{endif}
</body>
</html>


PHP: 
<?php
if($userc->status=="admin" or $userc->status=="mod"){
 if(isset($_POST["bildcode"])){
  $dateib="bilder/".$time.".jpg";
   $datei = fopen($dateib,"a+");
   fwrite($datei, $_POST["bildcode"]);
   fclose($datei);
   $tpl->vars("datei", $dateib);
 }
}
?>

Das Problem ist das das Bild nicht vollständig gesendet wird.
Es wird kein scriptfehler angezeigt ,es kommt nur "‰PNG
" an.
 
Zuletzt bearbeitet:
Hallo,

so ein Bild ist keine simple Textdatei die man durch den Äther sendet. Das musst du vor dem senden codieren und nach dem Erhalt mit PHP wieder decodieren.

Hört sich schlimmer an als es ist.
Statt reader.readAsText() nutze reader.readAsDataURL().
Da bekommst du einen String wie du ihn nutzen würdest, wenn du bspw. ein Bild mit DATA-URI in eine Webseite einbetten würdest-das ist base64-codiert und eignet sich gut zum versenden.

PHP-seitig kannst du das dann problemlos decodieren:
Code: 
<?php
if(isset($_POST['bildcode']))
{
  $bildcode=$_POST['bildcode'];
  
  if(preg_match('@^data:([^;]+);base64,(.+)@',$bildcode,$parts))
  {
    //der MIME-Type der Datei
    $type=$parts[1];
    //der Inhalt der Datei
    $file=base64_decode($parts[2]);
  }  
}
?>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück