Передача пути к загруженному файлу из перетаскивания HTML5 в поле ввода

Я работаю над приложением (в Node.js, которое не имеет значения для данного случая ), которое позволяет пользователю загружать изображение. Он отлично работает с использованием формы с полем ввода (type="file" ).

Однако я хочу иметь возможность загружать изображение с помощью перетаскивания HTML5. Насколько я понял, можно перетащить изображение в клиент, а миниатюра изображения отображается в div. Однако мне действительно нужна помощь с загрузкой файлов.

Дело в том, что я хочу использовать форму, которую использую сейчас, и (каким-то образом )передать путь файла в поле ввода, т.е. поток будет работать точно так же, как сейчас, но вместо того, чтобы выбирать файл, просматривая его, я хочу прикрепить его к полю ввода, перетащив его.

В приведенном ниже js-коде для перетаскивания файл, который был перетащен клиенту, хранится в переменной «file», и я могу использовать «file.name», «file.type» и «file.size" точно так же, как и раньше с формой. Однако я не могу получить доступ к файлам «путь» (file.path ), что делает невозможным доступ к стороне файлового сервера для загрузки так же, как я делал это раньше.

Вопрос в том, можно ли передать объект файла в поле ввода после того, как файл был перетащен на клиент, чтобы я мог нажать «отправить» и загрузить файл? Если да, то как это можно сделать?

Заранее спасибо!

Dropbox, а также форма, которую я использую для загрузки файлов:

<div id='upload'>
    <article>
        <div id='holder'>
            <p id='status'>File API and FileReader API not supported</p>
        </div>
    </article> 

    <form method='post' enctype='multipart/form-data' action='/file-upload'>
        <p>
            <input type='file' name='thumbnail'>
        </p>
        <p>
            <input type='submit'>
        </p>
    </form>
</div>

код для перетаскивания:

uploadImage: function(){
    var holder = document.getElementById('holder'),
        state = document.getElementById('status');

    if (typeof window.FileReader === 'undefined') {
      state.className = 'fail';
    } else {
      state.className = 'success';
      state.innerHTML = 'File API & FileReader available';
    }

    holder.ondragover = function () { this.className = 'hover'; return false; };

    holder.ondragend = function () { this.className = ''; return false; };

    holder.ondrop = function (e) {
      this.className = '';
      e.preventDefault();

      var file = e.dataTransfer.files[0],
          reader = new FileReader();

      reader.onload = function (event) {
        holder.style.background = 'url(' + event.target.result + ') no-repeat center';
      };

      reader.readAsDataURL(file);

      return false;
    };
},
14
задан challet 7 October 2012 в 23:59
поделиться