Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>Dateiablage</title>
      <style>
      
*
{
   font-family: Comic Sans MS, Arial;
}
​
.ablage
{
   width: 100%;
   height: 100px;
   border: dashed 2px #DDD;
   margin-bottom: 10px;
   position: relative;
   cursor: default;
   transition background linear 100ms;
}
​
.ablage:hover
{
   background: #F7F7F7;
   transition: background linear 100ms;
}
​
.ablage .text
{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: #DDD;
   font-size: 3em;
   white-space: nowrap;
}
​
.ablage input[type=file]
{
   display: none;
}
​
table
{
   width: 100%;
   border-collapse: collapse;
   border: solid 1px #DDD;
   box-shadow: 0 0 3px #EEE;
}
​
tr:nth-child(2n+1) td
{
   background: #EEE;
}
​
tr td:nth-child(1)
{
   width: 100%;
}
​
td
{
   white-space: nowrap;
   padding: 2px 5px;
   transition: background linear 100ms;
}
​
tr:hover td
{
   background: #BBB;
   transition: background linear 100ms;
}
​
.targetFrame
{
   display: none;
}
      
      </style>
   </head>
   <body>
      <h1>Dateiablage</h1>
      <p>
      Einfache Dateiablage: Feld anklicken und Datei(en) auswählen oder per Drag and Drop
      ablegen zum hochladen. Öffnen mit dem Eingabe-Pfeil auf der rechten Seite, Löschen
      mit dem "X" ganz rechts hinter Dateinamen.
      </p>
      <form class="ablage" enctype="multipart/form-data" action="" method="POST">
         <span class="text">Datei hochladen</span>
         <input type="file" name="datei[]" multiple="true"/>
      </form>
      <table>
         <thead>
            <tr>
               <th>Dateiname</th>
               <th>Datum</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td><a href="?download=Datei1.txt">Datei1.txt</a></td>
               <td>Fri, 14 Jun 2024 08:02:10 +0200</td>
               <td><a href="?open=Datei1.txt"><button>&crarr;</button></a></td>
               <td><a href="?delete=Datei1.txt"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=Beispieldatei.docx">Beispieldatei.docx</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=Beispieldatei.docx"><button>&crarr;</button></a></td>
               <td><a href="?delete=Beispieldatei.docx"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=Datei2.pdf">Einladung_.pdf</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=Datei2.pdf"><button>&crarr;</button></a></td>
               <td><a href="?delete=Datei2.pdf"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=Einladung_.pdf">Einladung_.pdf</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=Einladung_.pdf"><button>&crarr;</button></a></td>
               <td><a href="?delete=Einladung_.pdf"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=Pr%C3%A4si.xml">Präsi.xml</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=Pr%C3%A4si.xml"><button>&crarr;</button></a></td>
               <td><a href="?delete=Pr%C3%A4si.xml"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=bak3.xml">bak3.xml</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=bak3.xml"><button>&crarr;</button></a></td>
               <td><a href="?delete=bak3.xml"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=bak4.xml">bak4.xml</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=bak4.xml"><button>&crarr;</button></a></td>
               <td><a href="?delete=bak4.xml"><button>X</button></a></td>
            </tr>
            <tr>
               <td><a href="?download=Testpdf.pdf">Testpdf.pdf</a></td>
               <td>Fri, 14 Jun 2024 08:03:36 +0200</td>
               <td><a href="?open=Testpdf.pdf"><button>&crarr;</button></a></td>
               <td><a href="?delete=Testpdf.pdf"><button>X</button></a></td>
            </tr>
         </tbody>
      </table>
      
      <script>
var ablage = document.querySelector(".ablage");
var fileInput = ablage.querySelector("input[type=file]");
​
ablage.onclick = function (ev) { fileInput.click(); };
ablage.ondragover = function (ev) { ev.preventDefault(); };
ablage.ondrop = function (ev) {
   ev.preventDefault();
   fileInput.files = ev.dataTransfer.files;
   fileInput.dispatchEvent(new Event("change"));
};
fileInput.onchange = function (ev) {
   ablage.submit();
   ablage.reset();
};
​
      </script>
   </body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers