Я работаю над приложением (в 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;
};
},