"Datei hochladen" mit individuellem "Durchsuchen"-Button

[lina-]

moin Rouven :)

Moin,

najaaa.... mit viel viel viel rumtricksen und Javascript geht das schon... Ich habs zumindest gemacht ;)
das möchtest du uns nicht zufällig mal zeigen wie das geht?

eigentlich ungern, weil das ne echte Frickelei ist ;)

Und überhaupt ist davon abzuraten.... weil ja nicht immer (in meinem Fall schon) gewährleistet ist, dass die User Javascript aktiviert haben - und ohne funktioniert meine Lösung nun mal nicht.

Aber hier (zur Info) sind die schnipsel:

Javascript:

  
var  contextpath="<%= request.getContextPath() %>";  
var removeId=0;  
var ia;  
var ir;  
var file;  
function mouseOutFile() {  
 if (file.value != "") {  
  handleFileInputs();  
 }  
}  
function preLoadImg(){  
 ia = document.createElement('img');  
 ia.className='icon';  
 ia.src="<%=request.getContextPath()%>/img/add.gif"  
 ia.border='0';  
 ir = document.createElement('img');  
 ir.src="<%=request.getContextPath()%>/img/remove.gif"  
 ir.border="0";  
}  
/*Elemente erstellen, Abhängigkeiten festlegen*/  
function handleFileInputs() {  
 if (document.forms[0] == null) return;  
 if (!document.createElement || !document.getElementsByTagName) return;  
 var fakeFileUpload = document.createElement('div');  
 fakeFileUpload.className = 'fakefile';  
 var add = document.createElement('a');  
 add.className = 'add';  
 addText = '<bean:message key="folder.view.upload.add" />';  
 add.appendChild(ia.cloneNode(true));  
 add.appendChild(document.createTextNode(addText));  
   var input = document.createElement('input');  
 input.className = 'file';  
 iname = "file(" + document.forms[0].elements.length + ")";  
  
 if (document.all) {  
     input.type = 'file';  
     input.size='1';  
     input.name = iname;  
     input.id = iname;  
  } else if (document.getElementById) {  
     input.setAttribute('type', 'file');  
     input.setAttribute('name', iname);  
      input.setAttribute('id', iname);  
     input.setAttribute('size', 1);  
   }  
 file = input;  
 fakeInput = document.createElement('input');  
 fakeInput.name="fake";  
 fakeInput.className="notvisible";  
 var remove = document.createElement('a');  
 removeText = '<bean:message key="folder.view.upload.remove" />';  
 remove.className = "remove";  
 remove.id="remove_"+removeId;  
 removeId++;  
 remove.appendChild(ir.cloneNode(true));  
 remove.appendChild(document.createTextNode(removeText));  
 fakeFileUpload.appendChild(add);  
   fakeFileUpload.appendChild(input);  
 fakeFileUpload.appendChild(fakeInput);  
 fakeFileUpload.appendChild(remove);  
 cont = document.getElementById('inputContainer');  
   if (cont != null) {  
    cont.appendChild(fakeFileUpload);  
   }  
 var x = document.getElementsByTagName('input');  
 for (var i=0;i<x.length;i++) {  
  if (x[i].type != 'file') continue;  
  if (x[i].parentNode.className != 'fakefile') continue;  
  if (x[i].relatedElement!= null){  
   var el=x[i].relatedElement;  
   x[i].style.display="none";  
   el.style.display="inline";  
   el.value=x[i].value;  
   el.readOnly=true;  
   el.relatedElement.style.display="inline";  
   el.relatedElement.href="javascript:remove(\""+el.relatedElement.id+"\")";  
   }  
 }  
 input.relatedElement = fakeInput;  
 input.relatedElement.relatedElement = remove;  
 input.setAttribute('onchange', 'handleFileInputs()');  
 input.onchange = handleFileInputs;  
}  
function remove(name) {  
 element = document.getElementById(name);  
 if (element != null){  
  eparent = element.parentNode;  
  eparent.parentNode.removeChild(eparent);  
 }  
}  

CSS beispielhaft für Mozilla (für andere Browser ist es ähnlich - nur verschieben sich die "left"-Angaben):

  
/******************fileupload *****************/  
div.fakefile {  
 padding:0;  
 margin:0;  
}  
img.icon {  
 vertical-align:bottom;  
}  
.add {  
 left:-3px;  
 position:relative;  
 z-index:0;  
}  
input.file {  
    left:-100px;  
 height:15px;  
 position: relative;  
 z-index:2;  
 -moz-opacity:0 ;  
 filter:alpha(opacity: 0);  
 opacity: 0;  
}  
input.notvisible{  
    display:inline;  
    left:-74px;  
 width:150px;  
 z-index:4;  
 position: relative;  
 display:none;  
}  
.remove {  
 position:relative;  
 left:-74px;  
 text-align:left;  
 display:none;  
}  
/******************fileupload ende *****************/  

Die Html-Seite (auszugsweise):

  
<body id="body" onload="preLoadImg();handleFileInputs();">  
  <div class="iContainer" id="inputContainer"></div>  
</body>  

Nochmal zur Erinnerung: dies ist eine furchtbare Frickelei und ich empfehle _nicht_ sie zu verwenden (für mich funktioniert sie...)

liebe Grüße aus Berlin
lina-