emorikaner
Threadersteller
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 16.07.2010 10:05
Titel [HTML5] | drag and drop |
|
|
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 )
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.
|
|
emorikaner
Threadersteller
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 16.07.2010 12:05
Titel
|
|
|
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
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
Zuletzt bearbeitet von emorikaner am Fr 16.07.2010 12:06, insgesamt 1-mal bearbeitet
|
|