Pracuję nad aplikacją (w Node.js, która nie ma znaczenia w tym przypadku), która pozwala użytkownikowi przesłać obraz. Działa dobrze, używając formularza z polem input (type = "file").

Chcę jednak móc przesłać obraz za pomocą przeciągania i upuszczania HTML5. O ile mi wiadomo, możliwe jest przeciągnięcie obrazu do klienta, a miniaturka obrazu jest wyświetlana w div. Jednak naprawdę potrzebuję pomocy w uruchomieniu przesyłania plików.

Chodzi o to, że chcę użyć formularza, którego teraz używam, i (w jakiś sposób) przekazać ścieżkę pliku do pola wejściowego, tzn. Przepływ będzie działał dokładnie tak, jak teraz, ale zamiast wybierać plik przez przeglądanie chcę dołączyć go do pola wprowadzania, przeciągając i upuszczając.

W poniższym kodzie js do przeciągania i upuszczania plik, który został przeciągnięty do klienta, jest przechowywany w zmiennej „plik” i jestem w stanie użyć „nazwa pliku”, „typ pliku” i „rozmiar pliku” dokładnie w ten sam sposób, w jaki działa od dawna z formularzem. Nie mogę jednak uzyskać dostępu do plików „ścieżka” (file.path), co uniemożliwia dostęp do strony serwera plików w celu przesłania w taki sam sposób, jak robię to wcześniej.

Pytanie brzmi, czy możliwe jest przekazanie obiektu pliku do pola wejściowego po przeciągnięciu pliku do klienta, tak że mogę kliknąć „wyślij” i przesłać plik? Jeśli tak, jak można to zrobić?

Z góry dziękuję!

Dropbox oraz formularz, którego używam do przesyłania plików:

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

kod do przeciągania i upuszczania:

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