DmitrySikorsky

<form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
  <input name="files" type="file" multiple />
  <button type="submit">Submit</button>
</form>

DmitrySikorsky

<form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
  <input name="files" type="file" multiple onchange="submitForm('form');" />
</form>

DmitrySikorsky

function submitForm(formId) {
  document.getElementById(formId).submit();
}

DmitrySikorsky

<div class="upload-button">
  <div class="label">Click me!</div>
  <input id="files" name="files" type="file" size="1" multiple onchange="uploadFiles('files');" />
</div>

DmitrySikorsky

.upload-button {
  background: #f0f0f0;
  border-radius: 100px;
  text-align: center;
  position: relative;
  width: 200px;
  height: 200px;
}

.upload-button .label {

DmitrySikorsky

<iframe src="/home/iframe" frameborder="0" marginwidth="0" marginheight="0" width="400" height="200" scrolling="no"></iframe>

DmitrySikorsky

<form id="form" name="form" action="/uploader" enctype="multipart/form-data" method="post">
  <div class="buttons">
    <div class="upload-button">
      <div class="label">Click me!</div>
      <input id="files" name="files" type="file" size="1" multiple onchange="uploadFiles('files');" />
    </div>
  </div>
</form>

DmitrySikorsky

function uploadFiles(inputId) {
  var input = document.getElementById(inputId);
  var files = input.files;
  var formData = new FormData();

  for (var i = 0; i != files.length; i++) {
    formData.append("files", files[i]);
  }

  $.ajax(

DmitrySikorsky

<div id="dragAndDropArea" class="drag-and-drop-area">
  Drag and drop a file into this area
</div>

DmitrySikorsky

function initializeDragAndDropArea() {
  if (typeof (window["FileReader"]) == "undefined") {
    return;
  }

  var dragAndDropArea = $("#dragAndDropArea");

  if (dragAndDropArea.length == 0) {
    return;
  }