parisio
/
iao_team


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html>
<head>
  <title>File Uploader</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
      padding: 20px;
    }
  
    #container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
    }
  
    #list {
      margin-bottom: 20px;
    }
  
    .file-row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
  
    .file-name {
      flex-grow: 1;
    }
  
    .file-size {
      margin-left: 10px;
    }
  
    #pick {
      padding: 10px 20px;
      font-size: 16px;
      background-color: #007bff;
      color: #fff;
      border: none;
      cursor: pointer;
    }
  
    #pick:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>File Uploader</h1>

    <form>
      <div id="list"></div>
      <input type="button" id="pick" value="Upload">
    </form>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/plupload/3.1.5/plupload.full.min.js"></script>
  <script>
    window.onload = () => {
      var list = document.getElementById("list");
  
      var uploader = new plupload.Uploader({
        runtimes: "html5",
        browse_button: "pick",
        url: "chunk.php",
        chunk_size: "5mb",
        init: {
          PostInit: () => list.innerHTML = "<div>Ready</div>",
          FilesAdded: (up, files) => {
            plupload.each(files, file => {
              let row = document.createElement("div");
              row.className = "file-row";
              row.id = file.id;
              row.innerHTML = `
                <div class="file-name"><a href="uploads/${file.name}">${file.name}</a></div>
                <div class="file-size">(${plupload.formatSize(file.size)})</div>
                <strong></strong>
              `;
              list.appendChild(row);
            });
            uploader.start();
          },
          UploadProgress: (up, file) => {
            document.querySelector(`#${file.id} strong`).innerHTML = `${file.percent}%`;
          },
          Error: (up, err) => console.error(err)
        }
      });
      uploader.init();
    };
  </script>
</body>
</html>