blueimp

blueimp

by kzoon

HTML

<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/vendor/jquery.ui.widget.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.iframe-transport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.28.0/js/jquery.fileupload.js"></script>

<input id="fileupload" type="file" name="files[]"  data-url="dummy" multiple>

CSS

.fileinput-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.fileinput-button input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  -ms-filter: 'alpha(opacity=0)';
  font-size: 200px !important;
  direction: ltr;
  cursor: pointer;
}

JavaScript

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo(document.body);
            });
        }
    });
});

/*

var myDropDiv = document.getElementById("myDropDiv");
var myResults = document.getElementById("myResults");
var myButton1 = document.getElementById("testButton1");

var dropZone = new Dropzone(myDropDiv, {
  url: "dummy",
  previewsContainer: false
});
// //previewsContainer: false

dropZone.on("addedfile", function(file) {

  myResults.innerHTML += "Loaded " + file.name + " <br/>"
});

myButton1.onclick = function() {
  var files = dropZone.files;
  myResults.innerHTML += files.length + ' files loaded <br/>';
};

var myControl = document.getElementById("fileupload");
var myResults = document.getElementById("myResults");

myControl.fileupload({
  url: 'dummy',
  dataType: 'json',
  done: function(e, data) {
    alert('done');

  },
  progressall: function(e, data) {
    alert('progress');

  }
});


alert('OK');
*/