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

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

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

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

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

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

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

<code><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>
</code>

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

<code>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;
    };
},
</code>