Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.1/min/dropzone.min.js"></script>  
  
  
  
  <a data-fancybox data-src="#modal-file" href="javascript:;" class="btn-file">
    <span>
      Прикрепить файл(ы)
    </span>
    <span id="file-name">
      <span data-dz-name></span>
    </span>
  </a>
  
  <div id="modal-file" class="modal">
    <form action="/" method="post" class="dropzone" id="my-awesome-dropzone">
      <div class="dz-message" data-dz-message>
        <span>Выберите файлы Или просто перетащите сюда</span>
      </div>
    </form>
  </div>
</body>
</html>
 
.modal {
  display: none;
  
  width: 300px;
  height: 300px;
  text-align: center;
}
 
Dropzone.autoDiscover = false;
var fileList = new Array();
var mydropzone = new Dropzone("#my-awesome-dropzone", {
  init: function() {
      this.on("success", function(file) {
//           $('#file-name').html(file.name);
//         $.fancybox.close();
        var i = 0;
        fileList[i] = file.name;
        
//         document.writeln(fileList);
        i++;
        
        
        for(f=0;f<fileList.length;f++){
          
          //document.writeln(fileList[f]);
           $('#file-name').append('<i>' +fileList[f] + '</i>');
        }
      });
  }
});
Output 300px

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

Dismiss x
public
Bin info
lime7pro
0viewers