bilder-klein-und-gross-hochladen-umwandeln.php
Quell Code
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<main>
<p>Es wird ein Eingabefeld erzeugt, das Attribut multiple sorgt dafür, dass im Auswahldialog mehrere Dateien ausgewählt werden können </p>
<form enctype="multipart/form-data" action="sortieren.php" method="POST">
<input id='inputvalue' type='hidden' name='newsort' value='1' />
<input type="text" id="text" name="name" oninput="myFunction(this)" />
<input type="file" id="files" name="files[]" multiple />
<button type="submit" id="input1" name="action">Hochladen</button>
</form>
<script>
function myFunction(txt) {
var bt = document.getElementById('input1');
if (txt.value != '') {
bt.disabled = false;
}
else {
bt.disabled = true;
}
}
</script>
<p>Ein Ausgabefeld zur Anzeige der ausgewählten Dateien:</p>
<output id="list"><ul id="sortable"></ul></output>
</main>
<script>
function dateiauswahl(evt) {
var dateien = evt.target.files; // FileList object
var imgs = [], names = []; counter = 0, nrimgs = dateien.length, binchar = 97;
// Auslesen der gespeicherten Dateien durch Schleife
for (let i = 0; i < dateien.length; i++) {
let f = dateien[i];
names[i] = f.name;
// nur Bild-Dateien
if (!f.type.match('image.*')) {
nrimgs--;
continue;
}
let reader = new FileReader();
reader.onload = function (e) {
console.log("loaded " + i)
imgs[i] = e.target.result;
counter++;
if (counter == nrimgs) {
// erzeuge Thumbnails.
for (var j = 0; j < imgs.length; j++) {
var img = document.createElement('img');
img.className = 'bild';
img.src = imgs[j];
img.title = names[j];
var li = document.createElement('li');
li.appendChild(img);
li.id = String.fromCharCode(97 + j);
counter++;
var sortable = document.getElementById("sortable");
sortable.appendChild(li);
binchar++;
$(function() {
$('#sortable').sortable({
update: function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
console.log(productOrder);
$('input[name="newsort"]').val(productOrder);
}
});
});
}
}
};
// Bilder als Data URL auslesen.
reader.readAsDataURL(f);
};
}
// Auf neue Auswahl reagieren und gegebenenfalls Funktion dateiauswahl neu ausführen.
document.getElementById('files').addEventListener('change', dateiauswahl, false);
</script>
</body>
</html>