mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 23:40 Benutzername: Passwort: Auto-Login

Thema: [HTML5] | drag and drop vom 16.07.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> [HTML5] | drag and drop
Autor Nachricht
emorikaner
Threadersteller

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 16.07.2010 10:05
Titel

[HTML5] | drag and drop

Antworten mit Zitat Zum Seitenanfang

Morgen zusammen!

Wir haben hier ein internes Projekt, bei dem man Bilder über ein Formular hochladen kann.
Hier soll einfach ein Bild per drag 'n drop vom desktop ins Formular gezogen werden.

Funktioniert in webkit browsern wunderbar, da das <input type="file"> element noch einigermaßen
stylebar ist.

Im Moment sieht das in etwa so aus:
Code:
<form action="" enctype="multipart/form-data" method="post">
    <label>
        <span>Bild hierher ziehen</span>
        <input id="dropzone" type="file" name="uploadfile" />
    </label>
    <button type="submit">Umwandeln</button>
</form>

Code:
form {
    border: 1px solid #ddd;
    border-radius: 2px;
    display: block;
    height: 200px;
    margin: 50px auto 0;
    padding: 10px;
    position: relative;
    width: 360px;
}

input[type=file] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; z-index: 1; }

button {
    background: #ddd;
    border-radius: 2px;
    cursor: pointer;
    display: block;
    height: 20px;
    position: absolute;
    right: 10px;
    top: 10px;
    width: 100px;
    z-index: 2;
}


Das <input> nimmt die Größe vom <form> an, d.h. das Bild muss nur irgendwo im <form> gedropt werden.

Nur der Firefox hat damit scheinbar seine Probleme (selbst in der Beta 4 Version Meine Güte! )
Dort scheint das dropen nicht erlaubt zu sein.

Gibt es irgendeine Möglichkeit das mit JavaScript (bevorzugt jQuery) zu lösen?
Habe bisher nur das gefunden, nur irgendwie komme ich damit nicht klar.
http://github.com/weixiyen/jquery-filedrop

Im IE/Opera muss das nicht funktionieren, da das nur intern ist.
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: Männlich
Verfasst Fr 16.07.2010 10:34
Titel

Antworten mit Zitat Zum Seitenanfang

nein. geht höchstens mit google gears. selbst bei wave haben sie ja noch arge probleme damit.

€: habe den letzten satz überlesen...

also: was ist dir denn an dem gefundenen script unklar?


Zuletzt bearbeitet von sahnemuh am Fr 16.07.2010 10:35, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
emorikaner
Threadersteller

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 16.07.2010 12:05
Titel

Antworten mit Zitat Zum Seitenanfang

sahnemuh hat geschrieben:
€: habe den letzten satz überlesen...
also: was ist dir denn an dem gefundenen script unklar?

Also, gehen muss es nur noch in FF, Chrome und Safari (also Webkit allg) kommen ohne Script klar Grins

Hm, also so wie ich es bisher verstehe wird das Bild automatisch an
die angegebene url hochgelanden.
Code:

$('#dropzone').filedrop({
    url: 'upload.php',              // upload handler, handles each file separately
    paramname: 'userfile',          // POST parameter name used on serverside to reference file
    data: {
        param1: 'value1',           // send POST variables
        param2: function(){
            return calculated_data; // calculate data at time of upload
        },
    },
    uploadStarted: function(i, file, len){
        // a file began uploading
        // i = index => 0, 1, 2, 3, 4 etc
        // file is the actual file of the index
        // len = total files user dropped
    },
    uploadFinished: function(i, file, response, time) {
        // response is the data you got back from server in JSON format.
    },
    progressUpdated: function(i, file, progress) {
        // this function is used for large files and updates intermittently
        // progress is the integer value of file being uploaded percentage to completion
    }
});

Ich denke mal das sind die einzigsten Parameter die für mich wichtig sind, oder?
Nur was muss bei "data" rein?

Ist für mich als 1.LJ Lehrling irgendwie dann doch zu hoch, vlt liegts auch an der Hitze *ha ha*


Zuletzt bearbeitet von emorikaner am Fr 16.07.2010 12:06, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
 
Ähnliche Themen Browser Drag n Drop
Drag&Drop mit JavaScript.
Table Drag & Drop
Drag and Drop mit Dropdown?
Drag & Drop Frage
FLASH: Beyond Drag & Drop . . .
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.