HTML besseres upload feld ?

[Sarius87]

hallo, wie kann ich ein besseres uploadfeld benutzen anstatt dieses "Datei auswählen" , am besten so ein feld wo man die datei dann auch hin ziehen kann ? wie geht sowas, wie heißt sowas ? habe beim googeln nichts gefunden.

 

[Mercator]

Nennt sich "Drag and Drop" guckst Du hier:
https://css-tricks.com/drag-and-drop-file-uploading/

 

[Sarius87]

ich versteh nicht wie man das macht... wo soll denn z.b. beim 2. schritt dann der css code hin ?

 

[violentviper]

ich versteh nicht wie man das macht... wo soll denn z.b. beim 2. schritt dann der css code hin ?

In deine css Datei, oder in den Header wo du das CSS definierst.

 

[funkmasterflow]

Du hast doch in deinem HTML-Dokument eine CSS-Datei eingebunden, oder?
Genau da packst Du den Code aus Schritt 2 rein.

Du kannst ansonsten auch einen Styleblock <style>CSS hier hin</style> in dein HTML packen.

 

[Sarius87]

Du kannst ansonsten auch einen Styleblock <style>CSS hier hin</style> in dein HTML packen.

okay (ist es egal ob ich es oben oder unten einbinde ?)


und weiter unten beim js das selbe oder wie ? einfach mit <script> dann den code einbinden ? auch egal wo in der datei ?

erst kommt ja ein 2 zeiliger script-code, darunter ein einzeiliger, der soll dann einfach unter den 2 Zeiligen oder wie ? wenn ja , hat sich einfach ab schritt 2 bei mir nichts geändert und es hat nicht dieses Design was es haben soll ... code :

<style>
.box__dragndrop,
.box__uploading,
.box__success,
.box__error {
  display: none;
}
</style>

<form class="box" method="post" action="" enctype="multipart/form-data">
  <div class="box__input">
    <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
    <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
    <button class="box__button" type="submit">Upload</button>
  </div>
  <div class="box__uploading">Uploading&hellip;</div>
  <div class="box__success">Done!</div>
  <div class="box__error">Error! <span></span>.</div>
</form>

<script>
var div = document.createElement('div');
return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)
return 'FormData' in window;
'FileReader' in window
var isAdvancedUpload = function() {
  var div = document.createElement('div');
  return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
}();
if (isAdvancedUpload) {
  // ...
}
</script>

<script>
var $form = $('.box');

if (isAdvancedUpload) {
  $form.addClass('has-advanced-upload');
}
</script>
<style>
.box.has-advanced-upload {
  background-color: white;
  outline: 2px dashed black;
  outline-offset: -10px;
}
.box.has-advanced-upload .box__dragndrop {
  display: inline;
}
</style>

so sieht es noch aus :

 

[funkmasterflow]

Den Skript-Block würde ich vor dem schließenden Body-Tag setzen.
Lies Dir anschließend nochmal das Tutorial genau durch und vergleiche mal die JS-Code-Blöcke.
Da erschließt sich Dir dann, was wo hin muss.
Einfach mal ein bisschen herum probieren. Dabei kannst Du nix kaputt machen und lernst mehr. Wenn wir Dir alles vorkauen, kommst Du eher zum Ergebnis, verstehst aber möglicherweise nicht warum

Viel Erfolg!