Bilderupload und vorheriges wechseln der Bilder

Ich habe mal etwas zusammengefummelt:
HTML: 
<script type="text/javascript"><!--
window.onload = init;
function init() {
	var list = document.getElementById("foobar");
	var items = list.getElementsByTagName("li");
	for(var i=0; i<items.length; i++) {
		var spanElements = items[i].getElementsByTagName("span");
		for(var j=0; j<spanElements.length; j++) {
			if( spanElements[j].className.match(/controlls/) ) {
				spanElements[j].parentNode.removeChild(spanElements[j]);
			}
		}
		var _spanElement = document.createElement("span");
		_spanElement.className = "controlls";
		if( i != items.length-1 ) {
			var _buttonElement = document.createElement("button");
			_buttonElement.innerHTML = "?";
			_buttonElement.className = "move-down";
			_buttonElement.onclick = new Function("item_moveDown(getParentElement(this, 'li'))");
			_spanElement.appendChild(_buttonElement);
		}
		if( i != 0 ) {
			var _buttonElement = document.createElement("button");
			_buttonElement.innerHTML = "?";
			_buttonElement.className = "move-up";
			_buttonElement.onclick = new Function("item_moveUp(getParentElement(this, 'li'))");
			_spanElement.appendChild(_buttonElement);
		}
		items[i].appendChild(_spanElement);
	}
}
function getParentElement( obj, tagName )
{
	var elem = obj;
	while( elem = elem.parentNode ) {
		if( elem.nodeName == tagName.toUpperCase() ) {
			break;
		}
	}
	return elem;
}
function item_moveUp( obj )
{
	getParentElement(obj, "ul").insertBefore(obj, obj.previousSibling);
	init();
}
function item_moveDown( obj )
{
	getParentElement(obj, "ul").insertBefore(obj, obj.nextSibling.nextSibling);
	init();
}
//-->
</script>


<ul id="foobar">
	<li>foobar 1<input type="file"></li>
	<li>foobar 2<input type="file"></li>
	<li>foobar 3<input type="file"></li>
	<li>foobar 4<input type="file"></li>
	<li>foobar 5<input type="file"></li>
</ul>
Ich hoffe, es funktioniert.
 
Hier mein Vorschlag....ist unmerklich kürzer :-)
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function move(from,to)
{
  tbl=document.getElementById('upload');
  for(i=0;i<tbl.rows[from].cells.length;++i)
    {
      if(i==1)continue;
      from_=tbl.rows[from].cells[i].firstChild.cloneNode(true);
      to_=tbl.rows[to].cells[i].firstChild.cloneNode(true);
      tbl.rows[from].cells[i].replaceChild(to_,tbl.rows[from].cells[i].firstChild);
      tbl.rows[to].cells[i].replaceChild(from_,tbl.rows[to].cells[i].firstChild);
    }
}
//-->
</script>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<table border="1"id="upload">
<tr><td><img src="irgendwas1.gif" alt="1"></td><td><b onclick="move(0,1)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas2.gif" alt="2"></td><td><b onclick="move(1,0)">hoch</b><br><b onclick="move(1,2)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas3.gif" alt="3"></td><td><b onclick="move(2,1)">hoch</b><br><b onclick="move(2,3)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas4.gif" alt="4"></td><td><b onclick="move(3,2)">hoch</b><br><b onclick="move(3,4)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas5.gif" alt="5"></td><td><b onclick="move(4,3)">hoch</b></td><td><input type="file" name="file[]"></td></tr>
</table>
</body>
</html>

Ich muss dich aber enttäuschen, du musst das wohl vergessen :(
Der Inhalt der Uploadfelder wird beim verschieben gelöscht;-]
 
Das habe ich gehofft, denn du findest sicherlich eine elegantere Lösung. Irgendwie komisch, dass man auch immer erst zweimal klicken muss, damit es funktioniert.
 
Naja..obs eleganter ist, liegt im Auge des Betrachters :-)
Kürzer ist es immer noch..sogar noch kürzer geworden
Code: 
<html>
<head>
<title>Test</title>
<style type="text/css">
table#upload b{display:none;}
</style>
<script type="text/javascript">
<!--
document.write(unescape('%3Cstyle%20type%3D%22text%2Fcss%22%3E%0D%0Atable%23upload%20b%7Bdisplay%3Ablock%3B%7D%0D%0A%3C%2Fstyle%3E'));
function move(from,to)
{
  tbl=document.getElementById('upload');
  for(i=0;i<tbl.rows[from].cells.length;++i)
    {
      if(i==1)continue;
      tbl.rows[to].cells[i].insertBefore(tbl.rows[from].cells[i].firstChild,tbl.rows[to].cells[i].firstChild);
      tbl.rows[from].cells[i].appendChild(tbl.rows[to].cells[i].lastChild);
    }
}
//-->
</script>

</head>
<body>
<form action="upload.php"method="post" enctype="multipart/form-data">
<table border="1"id="upload">
<tr><td><img src="irgendwas1.gif" alt="1"></td><td><noscript><input type="radio" name="top" value="0"></noscript><b onclick="move(0,1)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas2.gif" alt="2"></td><td><noscript><input type="radio" name="top" value="1"></noscript><b onclick="move(1,0)">hoch</b><b onclick="move(1,2)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas3.gif" alt="3"></td><td><noscript><input type="radio" name="top" value="2"></noscript><b onclick="move(2,1)">hoch</b><b onclick="move(2,3)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas4.gif" alt="4"></td><td><noscript><input type="radio" name="top" value="3"></noscript><b onclick="move(3,2)">hoch</b><b onclick="move(3,4)">runter</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td><img src="irgendwas5.gif" alt="5"></td><td><noscript><input type="radio" name="top" value="4"></noscript><b onclick="move(4,3)">hoch</b></td><td><input type="file" name="file[]"></td></tr>
<tr><td colspan="3" align="center"><input type="submit"></td></tr>
</table>
</body>
</html>

Hab nebenbei noch ein paar Radio-Buttons dabei, soll ja schliesslich auch ohne JS gehen :suspekt:

Das war mir aber auf jeden Fall neu, dass insertBefore()/appendChild() den Ursprungsknoten tatsächlich versetzen, und nicht eine Kopie derer verwenden.
 
Mal erlich, ihr seid der Hammer Jungs. Habt ihr das so aus dem Kopf geschrieben oder irgendwo nachgeschaut? ;) Wenn ich euch mal irgendwo treffe, geb ich euch n' Pilz aus.

Was mich jetzt aber trotzdem noch interessieren würde ist ob ich wenn ich die Bilder jetzt verschoben haben und auf upload klicke die bilder dann auch anders benannt werden, bzl. file[]....ich teste mal eben;)
 
Das „file[]“ sollte eigentlich dafür sorgen, dass es serverseitig als Array behandelt wird. Die Rangfolge müsste somit erhalten bleiben.
 
Am Inhalt(Elemente, Attribute, etc) ändert sich da überhaupt nichts...es wird nur alles durcheinandergewürfelt.

Gesendet wird auch dasselbe, diesmal nur in anderer Reihenfolge.

Bei meinem Vorschlag wird, falls JS aus ist, eine Variable "top" übermittelt.
Das sind die radio-Buttons, damit kann der Benutzer bei deaktiviertem JS auswählen, welches Bild er als Favorit hat.
 
Da bin ich mir auch nicht wirklich sicher.
Ich versuche gerade das Script so umzubasteln dass,:
auch wenn ich keinen upload per input Formular auswähle,
ich die Bilder verschieben kann und das die neu versobenenen Bilder zwar anders sind als die Ausgangsbilder, aber trotzdem noch die selben Namen haben. Nur das funktioniert mit dem file[] irgendwie noch nicht...
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück