Fileupload via File Dialog im Browser

KarlPichler · 30. März 2012

Hallo "einfach nur crack". ich möchte diesen Thread wieder aufleben lassen

Und zwar ich hab jetzt den Dateiupload mit dem jquery script "uploadfiy" realisiert.
Funktioniert auch wirklich einfach und super, allerdings check ich einige sachen noch nicht.

Also erstens: ich möchte gerne immer den gesamten Bilderordner ausgeben lassen, so dass der user auch immer seine Bilder sehen kann.
Dafür möchte ich auf eine extere php Datei verweisen, die mir diese Bilder ausgibt.
Diesen "Link" sollte ich ja in der "InitDone" und in der "AllComplete" Mehtode aufrufen, oder?
Allerdings hab ich keine Ahnung wie den das funktioniert! Also die Verlinkung.

Hier ist mal der Code für das Uploadfiy

Javascript:

<CODE><script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
  $('#file_upload').uploadify({
	'uploader'  : '/uploadify/uploadify.swf',
	'script'    : '/uploadify/uploadify.php',
	'cancelImg' : '/uploadify/cancel.png',
	'folder'    : '/uploads',
	'multi'		: true,
	'auto'      : true,
        'onComplete'  : function(event, ID, fileObj, response, data) {
          //Verlinkung auf die PHP Datei welche mir den gesamten inhalt des upload folders ausgibt
        }
  });
});
// ]]>
</script>
 </CODE>

Uploadfiy:
http://www.uploadify.com/documentation/events/oncomplete-2/

Hast du eine Idee, bzw. hast du schon mal sowas gmacht, bzw. gibt es eine gute alternative?

Für eine Antwort wäre ich sehr dankbar!

Parantatatam · 30. März 2012

Du brauchst einfach ein PHP-Skript, das dir alle Bilder aus einem Verzeichnis als JSON-Objekt zurück gibt und dann folgenden Javascript-Teil in deinem "oncomplete"-Ereignis:

Code:

$.post('get-all-files.php', { user_id: user_id }, function (data) {
  // in data sind jetzt alle Bilder des Nutzers gespeichert als Array
});

Wenn ich dir bei deinem PHP-Skript helfen soll, müsste ich aber genauer wissen, wie du deine Bilder benennst, wie deine Verzeichnisstruktur aussieht und wo deine Bilder dann liegen.

KarlPichler · 30. März 2012

Okay danke erstmals für die antwort!
Ja soweit hab ich das noch gewusst, allerdings micht mir die umsetztung zu schaffen!

Kannst du nen Example- Code posten? wäre super!, den durch googlen find ich auch nicht das richtige bzw. kenn mich damit nicht aus!

Lg

Parantatatam · 30. März 2012

Ich gehe mal davon aus, dass alle deine Nutzer ein eigenes Verzeichnis haben, in dem die Bilder gespeichert werden:

PHP:

$directory = 'images/' . (int) $_POST['user_id'] . '/*.jpg';
$images    = glob($directory);
echo json_encode($images);

KarlPichler · 30. März 2012

naja ich habe ein PHP script welches mir alle Bilder aus einem Verzeichnis auslest, und das funktioniert, allerdings weis ich eben nicht wie ich das mit dem uploadfiy aufrufen muss. danke

dieses sieht folgendermaßen aus:

Code:

<html>
<head><link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul id="galerie">
<?php
$ordner = "upload";
 
$allebilder = scandir($ordner); // Sortierung A-Z
 
foreach ($allebilder as $bild) {
    $bildinfo = pathinfo($ordner."/".$bild);
    $size = ceil(filesize($ordner."/".$bild)/1024);
 
    if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
    ?>
    <li>
        <a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>">
        <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a>
        <span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
    </li>
<?php
    };
 };
?>
</ul>
</body>
</html>

danke

Parantatatam · 30. März 2012

Du willst also auf eine andere Seite verweisen und nicht die Bilder auf der aktuellen Seite nachladen?

Nachtrag: Ich habe dein Skript mal etwas ausgebessert, da man generell erst einmal alle Daten verarbeiten sollte bevor man sie ausgibt und nicht während der Erstellung der Ausgabe erst die Daten ermitteln sollte.

PHP:

<?php
  $directory = 'upload';
  $images    = glob($directory . '/*.*');
  $images    = array_filter($images, function ($image) {
    return (strrchr($image, '/') !== 'Thumbs.db');
  });
  array_walk($images, function (&$image) {
    $image = array(
      $image,
      ceil(filesize($image) / 1024)
    );
  });
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
  <ul id="galerie">
  <?php foreach($images as $image): ?>
    <li>
      <a href="<?php echo $image[0]; ?>">
        <img src="<?php echo $image[0]; ?>" width="140" alt="Vorschau" />
      </a>
      <span><?php echo $image[0];?> (<?php echo $image[1]; ?>)</span>
    </li>
  <?php endforeach; ?>
  </ul>
</body>
</html>

KarlPichler · 30. März 2012

okay danke.

nein ich will alles auf einer seite haben.

Ich möchte auf der seite alle bilder sehen die sich momentan im Ordner befinden
--> InitDone --> alle Bilder ausgeben.

Auf der selben seite befindet sich auch das Upload script --> Upload Images

Ist dies nun durchgeführt sollte sich das <div> wo dall Bilder angezeigt werden, aktualisieren und auch alle neuen Bilder mitanzeigen.
--> OnComplete --> alle Bilder erneut ausgeben.

Bilder Ausgeben

Bild1	Bild2	Bild3
Bild4	Bild5	Bild6
Bild7	Bild8	Bild9
Bild10	Bild11	Bild12
Bild13	Bild14	Bild15

Upload Button

upload bild 1

upload bild 2

upload bild 3

upload bild 4

upload bild 5

ich hoffe du kennst dich aus

ein gesamter code wäre perfekt, vl. auch mit einer delete Methode, wenn du zufällig eine auf Lager hast!

LG

Parantatatam · 30. März 2012

Ich habe es nicht komplett ausprobiert, aber es sollte so funktionieren:

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Bildergallerie</title>
  <script type="application/javascript" src="jquery.js"></script>
  <script type="application/javascript">
    $(document).ready(function () {
      var userid = 1;
      
      $('#upload-submit-button').click(function () {
        // disable all input fields and buttons
        $('#upload-images > li > *').add(this).attr('disabled', 'disabled');
        // upload all files
        $('#upload-images input').uploadify({
          'uploader'    : '/uploadify/uploadify.swf',
          'script'      : '/uploadify/uploadify.php',
          'cancelImg'   : '/uploadify/cancel.png',
          'folder'      : '/uploads',
          'multi'       : true,
          'onComplete'  : function(event, ID, fileObj, response, data) {
            $.post('uploaded-files.php', { userid: userid }, function (data) {
              var gallery = $('#image-gallery');
              gallery.html('');
              for(var i in data)
              {
                gallery.append('<li><img src="' + data[i].src + '" width="150" alt="picture" /></li>');
              }
            }, 'json');
          }
        });
      });
      $('#upload-images button').live('click', function () {
        // remove this input field
        $(this).prev('input').andSelf().remove();
        // if there is only one input field left then disable the submit button
        if($('#upload-images input').length === 1)
        {
          $('#upload-submit-button').attr('disabled', 'disabled');
        }
      });
      $('#upload-images input').live('change', function () {
        $('#upload-submit-button').add($(this).next('button')).removeAttr('disabled');
        $(this).parent().append(
          '<li>' + "\n" +
            '<input type="file" name="file[]" accept="image/*" />' + "\n" +
            '<button type="button" disabled="disabled">entfernen</button>' + "\n" +
          '</li>'
        );
      });
    });
  </script>
  <style type="text/css">
    #image-gallery, #upload-images {
      list-style-type:none;
      padding:0;
      margin:0;
    }
    #image-gallery li {
      float:left;
    }
  </style>
</head>
<body>
  <ul id="image-gallery"></ul>
  <form method="post" id="form-upload-images">
    <button id="upload-submit-button" type="button" disabled="disabled">Hochladen</button>
    <ul id="upload-images">
      <li>
        <input type="file" name="file[]" accept="image/*" />
        <button type="button" disabled="disabled">entfernen</button>
      </li>
    </ul>
  </form>
</body>
</html>

KarlPichler · 30. März 2012

Hallo.

Erstmal danke für den Mega- Support, allerdings funktioniert da rein gar nichts!
Entweder bin ich zu dumm uns es einzusetzten oder es hat was im Quellcode.
ich habe in der Zwischenzeit etwas herumgetüfftelt, und mittlerweile kann alle bilder ausgeben, allerdings komme ich damit gleich auf meine nächste frage.

Ich wiederhole nochmals die Ausgangslage:
Ich habe einen Ordnern in welchen Bilder gespeichert sind.
Wenn ich nun auf die Seite "Neue Bilder hinzufügen" gehe, sollten alle Bilder die sich zu diesem Zeitpunkt im Ordner befinden ausgegebn werden.
Unter den Bildern befindet sich ein Button, welcher einen FileDialog öffnet.
Ich wähle meine Files aus und drücke "Upload. --> Bilder werden hochgeladen.
Nach dem erfolgreichen Upload sollte sich die Anzeige der Bilder aktualiesren, quasi die neu hinzugefügten Bilder auch anzeigen.

Als Zuckerl wäre es schön wenn jedes Bild einen "delete" Button hätte, mit dem ich das Bild löschen kann.

-------ENDE AUSGANGSLAGE---------------

Ist Stand:
Ich habe den Upload mit "uploadfiy" realisiert, funktioniert auch super!
Ich gebe auch alle Bilder mitlerweile aus, nur das Problem ist, das ich dafür auf eine zweite seite verlinke, und ich eig. die Bilder gerne auf der selben seite ausgeben würde.

Mit dem Delete Button habe ich mich nicht beschäftigt!

Hier ist mal mein code:

Code:

//upload script

$(document).ready(function() {
  $('#file_upload').uploadify({
	'uploader'  : 'uploadify/uploadify.swf',
	'script'    : 'uploadify/uploadify.php',
	'cancelImg' : 'uploadify/cancel.png',
	'folder'    : '<?php echo $upload_pre_dir.$global_mysql_id_to_chg;?>',
	'multi'		: true,
    'onAllComplete'  : function(event, queueID, fileObj, reponse, data) {    
            location.href="php_admin_show.php?val=<?php echo $global_mysql_id_to_chg; ?>"; 
        }
  });
});


//php datei dazu, ich nehme momentan noch die alte, und nicht die du mir gesendet hast, aber werd deine sicher als nächsten schritt einbauen.
<?php
$id = $_REQUEST['val'];
?>

<html>
<head><link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<ul id="galerie">
<?php
$ordner = "upload_offers/".$id;
echo $ordner;
 
$allebilder = scandir($ordner); // Sortierung A-Z
 
foreach ($allebilder as $bild) {
    $bildinfo = pathinfo($ordner."/".$bild);
    $size = ceil(filesize($ordner."/".$bild)/1024);
 
    if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
    ?>
    <li>
        <a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>">
        <img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" width="140" alt="Vorschau" /></a>
        <span><?php echo $bildinfo['filename']; ?> (<?php echo $size ; ?>kb)</span>
    </li>
<?php
    };
 };
?>
</ul>
</body>
</html>

Danke bis jetzt und auch für künftige antworten!

Lg

Fileupload via File Dialog im Browser

KarlPichler

Mitglied

Parantatatam

mag Cookies & Kekse

KarlPichler

Mitglied

Parantatatam

mag Cookies & Kekse

KarlPichler

Mitglied

Parantatatam

mag Cookies & Kekse

KarlPichler

Mitglied

Parantatatam

mag Cookies & Kekse

KarlPichler

Mitglied

Neue Beiträge