HTML5 Drag n Drop Загрузка файла - PullRequest
Новая
       14

HTML5 Drag n Drop Загрузка файла

0 голосов
/ 29 июня 2011

У меня есть веб-сайт, на который я хотел бы загружать файлы с помощью Drag 'n Drop, используя HTML5 File API и FileReader . Мне удалось создать новый FileReader, но я не знаю, как загрузить файл. Мой код (JavaScript) следующий: 

holder = document.getElementById('uploader');

holder.ondragover = function () {
    $("#uploader").addClass('dragover');
    return false;
};

holder.ondragend = function () {
    $("#uploader").removeClass('dragover');
    return false;
};

holder.ondrop = function (e) {
  $("#uploader").removeClass('dragover');
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    //I shoud upload the file now...
  };
  reader.readAsDataURL(file);

  return false;
};

У меня также есть форма (id: upload-form) и поле входного файла (id: upload-input). У вас есть идеи?

P.S. Я использую jQuery, поэтому есть $("#uploader") и другие.

Ответы [ 2 ]

4 голосов
/ 29 июня 2011

Вместо того, чтобы кодировать это с нуля, почему бы не использовать что-то вроде html5uploader, который работает через drag n drop (использует FileReader и т. Д.): http://code.google.com/p/html5uploader/

РЕДАКТИРОВАТЬ: очевидно, мы, респонденты, должны склоняться к нашим ответам всегда, из-за страха перед голосованием вниз. Ссылка Google Code теперь не работает (четыре года спустя), поэтому вот плагин jQuery, который очень похож: http://www.igloolab.com/jquery-html5-uploader/

2 голосов
/ 29 июня 2011

Вы хотите извлечь содержимое файла в кодировке base64 и скопировать его на сервер.

JavaScript 

var extractBase64Data;
extractBase64Data = function(dataUrl) {
  return dataUrl.substring(dataUrl.indexOf(',') + 1);
};

// Inside the ondrop event
Array.prototype.forEach.call(event.dataTransfer.files, function(file) {
  var reader;

  if (!file.type.match(options.matchType)) {
    return;
  }

  reader = new FileReader();

  reader.onload = function(event) {
    var contentsBase64;
    if (event.target.readyState === FileReader.DONE) {
      contentsBase64 = extractBase64Data(event.target.result);
      return $.post(someURL, {
        contentsBase64: contentsBase64
      });
    }
  };

  reader.readAsDataURL(file);
});

CoffeeScript 

extractBase64Data = (dataUrl) ->
  dataUrl.substring(dataUrl.indexOf(',') + 1)


# Inside the ondrop event
Array::forEach.call event.dataTransfer.files, (file) ->
  return unless file.type.match(options.matchType)

  reader = new FileReader()

  reader.onload = (event) ->
    if event.target.readyState == FileReader.DONE
      contentsBase64 = extractBase64Data(event.target.result)
      $.post someURL,
        contentsBase64: contentsBase64

  reader.readAsDataURL(file)
...