Hallo lieber Community,
ich habe ein Problem unf hoffe ihr könnt mir dabei helfen.
Mein problem liegt darin, dass ich die ganzezeit versuche einen Formular zu erstellen bzw. eine Seite erstelle, wo man sein Text, seine Bilder direkt sich so anaschauen kann, wie es dann als fertiger beitrag stehen würde. Sprich Headline, Bild, Text und einen Slider mit bis zu 10 Bilder.
Das Formular würde ja soweit stehen, nun habe ich jedoch das problem mit dem letzten Teil. Das heißt, bei dem Formular habe ich einen Inputfeld für ein Bild, sobald man dort ein Bild ausgewählt hat, taucht automatisch per JS ein weiterer Inputfeld für bilder auf. und das geht immer so weiter. ( Den Script dafür habe ich schon soweit parat.) Jetzt komm ich zu dem wo ich nicht weiterkomme. Von jedem Inputfeld brauche ich sogesehen den Thumbnail. Der dann im Slider eingebuden wird. mehrere Scripte für den Thumbnail habe ich auch, nur weiss ich nicht wie ich es kombiniere.
Also das ist das Formular
Das wäre das JS-Script für die Dateiuploadfelder
und das Thumnail-Script wäre dann das
Ich weiß das es relative viel ist, hoffe ihr könnt mir da ein tipp geben wie ich es zusammenfüge und das es nicht schon ein ähnlichen beitrag gibt.
und Danke schonmal im vorraus für eure Hilfe.
mfg Brizzi
ich habe ein Problem unf hoffe ihr könnt mir dabei helfen.
Mein problem liegt darin, dass ich die ganzezeit versuche einen Formular zu erstellen bzw. eine Seite erstelle, wo man sein Text, seine Bilder direkt sich so anaschauen kann, wie es dann als fertiger beitrag stehen würde. Sprich Headline, Bild, Text und einen Slider mit bis zu 10 Bilder.
Das Formular würde ja soweit stehen, nun habe ich jedoch das problem mit dem letzten Teil. Das heißt, bei dem Formular habe ich einen Inputfeld für ein Bild, sobald man dort ein Bild ausgewählt hat, taucht automatisch per JS ein weiterer Inputfeld für bilder auf. und das geht immer so weiter. ( Den Script dafür habe ich schon soweit parat.) Jetzt komm ich zu dem wo ich nicht weiterkomme. Von jedem Inputfeld brauche ich sogesehen den Thumbnail. Der dann im Slider eingebuden wird. mehrere Scripte für den Thumbnail habe ich auch, nur weiss ich nicht wie ich es kombiniere.
Also das ist das Formular
Code:
<form method="post" name="Formularan" action="blog_speichern.php" enctype="multipart/form-data" onsubmit="return chkenFormular()">
<input id="iconbloggen" type="file" name="file" accept="image/*" titel="wähle ein Bild aus" multiple onChange="fileThumbnail(this.files);" style="opacity:0; position:absolute; cursor:pointer;" >
<button id="iconbloggen" > <h6>Bild Posten</h6> </button>
<button id="iconbloggen3"> <h6>Video Posten</h6> </button>
<select style="margin-top:0px; margin-left:4px; position:absolute;" name="thema" id="iconbloggen2" aria-label="Thema" class="thema" ><option value="-1" >Thema</option>
<option value="fashion">Fashion</option>
<option value="beauty">Beauty</option>
<option value="events">Events</option>
</select>
<div class="blogit">
<textarea id="headline" name="headline" placeholder="Deine Headline"></textarea>
<div id="thumbnail" style="border-radius: 4px; -webkit-margin-start: 5px; margin-top:10px; border-radius:4px; width: 635px;"> </div>
<textarea id="deintext" name="deintext" placeholder="Schreibe was dich bewegt"></textarea>
</div>
<ol id="files">
<li style="float:left; width:59px;">
<input type="file" name="files[]" style="width:60px; height:60px; position:absolute; margin-left:-60px; opacity:0;" />
<button style="height:60px; width:60px; float:left; margin-left:0px;">+</button>
</li>
</ol>
<input type="submit" id="posten" value="Posten" style="-webkit-margin-before:-4px;">
</form>
Das wäre das JS-Script für die Dateiuploadfelder
Java:
function handleFileInputs() // Sammlung
{
this.run = function() // Funktion zum Starten
{
handleInputs(); // Aufruf der Funktion zum Überwachen der Felder
}
function handleInputs()
{
files = document.getElementById('files'); // Liste per ID holen
inputs = files.getElementsByTagName('input'); // Alle Inputs in dieser Liste holen
for(n = 0;n < inputs.length;n++) // Alle Felder durchgehen
{
input = inputs[n]; // Aktuelles Feld in Variable speichern für einfachere Schreibweise
/*
Achtung!
Ich prüfe hier nicht ob das Feld ein Upload-Feld ist.
Das kann optional noch eingefügt werden, ich halte es allerdings für unnötig.
*/
input.onchange = function() // Beim ändern des Feldes
{
existsFile = checkFilename(this.value);
// Prüfen ob ausgewählter Pfad / Datei schon in einem anderen Feld ausgewählt ist
if(trim(this.value) != '' && !existsFile && !existsEmptyInputs())
// trim etfernt alle Leerzeichen am Anfang und am Ende eines Strings
// Wertüberprüfung der oben aufgerufenen Funktion ob Datei schon ausgewählt wurde
// Aufruf der Funktion für das Prüfen ob bereits leere Felder vorhanden sind
{
li = document.createElement('li'); // Neues Listelement erstellen
li.style.float="left";
li.style.overflow="hidden";
li.style.width="60px";
li.style.marginLeft="10px";
input = document.createElement('input'); // Input-Feld erstellen
input.setAttribute('type', 'file'); // type des Feldes auf file setzen
input.setAttribute('name', 'files[]'); // name des Feldes auf files[] setzen
input.style.width="60px";
input.style.height="60px";
input.style.position="absolute";
input.style.opacity="0";
button= document.createElement('button');
button.style.width="60px";
button.style.height="60px";
button.style.marginLeft="2px";
button.style.position="absolute";
button.style.float="left";
button.style.display="inline";
li.appendChild(button);
li.appendChild(input); // In das Listelement das input einfügen, hinter den Textknoten
files.appendChild(li); // Der Liste das Listelement einfügen, am Ende der Liste
handleInputs(); // Aufruf dieser Funktion für das Überprüfen der Felder
}
else if(existsFile) // Sollte Datei schon ausgewählt sein
{
alert("Fehler!\n- Datei bereits ausgewählt"); // Fehler ausgeben, dass Datei bereits ausgewählt ist
this.value = ''; // Inhalt des Feldes leeren
}
}
}
}
function checkFilename(FILENAME)
{
var i = 0;
inputs = document.getElementById('files').getElementsByTagName('input');
for(n = 0;n < inputs.length;n++)
{
input = inputs[n];
if(input.value == FILENAME && trim(input.value) != '') // Prüfen ob der Inhalt des momentanen Feldes gleich dem Übergebenen ist
{ // Prüfen ob der Inhalt des momentanen Feldes nicht leer ist
if(++i == 2) // Sollte i = 2 sein, dann true zurückgeben
return true;
/*
Warum 2?
Einmal darf dieser Pfad vorhanden sein, sonst darf man diese Datei überhaupt nicht auswählen wenn man auf 1 prüfen würde
*/
}
}
return false;
}
function existsEmptyInputs() {
inputs = document.getElementById('files').getElementsByTagName('input');
for(n = 0;n < inputs.length;n++)
{
input = inputs[n];
if(trim(input.value) == '') // Prüfen ob der Inhalt des aktuellen Feldes leer ist, wenn ja true zurückgeben
return true;
}
return false;
}
function trim(STRING)
{
if(STRING != null)
return STRING.replace(/^\s+/, '').replace(/\s+$/, ''); // Entferne alle Leerzeichen am Anfang und am Ende des übergeben Strings
else
return '';
}
}
window.onload = function() // Bei Aufruf der Seite
{
inputs = new handleFileInputs(); // Initialisieren der Sammlung
inputs.run(); // Starten der Überwachung für die Felder
}
und das Thumnail-Script wäre dann das
Code:
window.URL = window.URL || window.webkitURL;
$(document).ready(function() {
var fileThumbnail2 = function (evt) {
var $form = $(this),
id = $form.find('input[id^=name_thumb]').val(),
files = evt.target.files,
thumb = document.getElementById(id),
x;
thumb.innerHTML = "";
if (!files)
return;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (!file.type.match(/image.*/ ))
continue;
var img = document.createElement("img");
img.className = "bilddesposts";
img.src = window.URL.createObjectURL(input);
img.style.position=" relative";
img.width = 460;
img.style.marginBottom="5px";
img.style.borderRadius="4px";
img.onload = function(e) {
window.URL.revokeObjectURL(this.src);
};
var dele = document.createElement("button");
dele.className = "loesches";
dele.innerHTML = "x";
dele.style.color="#333";
dele.style.position="absolute";
dele.style.width="40px";
dele.style.height="40px";
dele.style.backgroundColor="#333";
dele.style.borderRadius="0% 0% 0% 50%";
dele.style.lineHeight="0px";
dele.style.outline ="none";
thumb.appendChild(dele);
thumb.appendChild(img);
/* dele.click(function(){
img.remove();
}*/
}
$(dele).click(function() {
$(thumb).empty();
});
}
$("#files").on('change', fileThumbnail2);
});
Ich weiß das es relative viel ist, hoffe ihr könnt mir da ein tipp geben wie ich es zusammenfüge und das es nicht schon ein ähnlichen beitrag gibt.
und Danke schonmal im vorraus für eure Hilfe.
mfg Brizzi