Приветствую!
Хотелось бы реализовать такую логику загрузки изображений:
0) На странице есть обычная форма с обычными полями.
1) Перетаскиваем в браузер некоторое кол-во изображений.
2) В определённой области на странице появляются превьюшки этих изображений.
3) Жмём обычную submit кнопку и отправляем всю форму как обычно(с полями и изображениями).
Реализовано всё, кроме 3 пункта. Думал, что его можно реализовать, создавая для каждого изображения по input типа file и в этот input как-то сунуть изображение из
event.dataTransfer.files, но так и не понял как это сделать.
Как примерно будут реализовываться 1 и 2 пункты(черновой грубый вариант):
document.ondrop = function(event){
var files = event.dataTransfer.files,
upZone = $("#multiUpload"),
i, img, div;
event.preventDefault();
for(i = files.length-1; i >= 0; i--){
img = new Image();
img.src = URL.createObjectURL(files[i]);
div = $('<div class="image hide">\
<div><img src="'+URL.createObjectURL(files[i])+'"></div>\
<div class="image-title">'+files[i].name+'</div>\
<div class="close">x</div>\
</div>');
upZone.append(div);
div.fadeIn();
}
};
В общем у меня 2 вопроса:
1) Можно ли всё-таки в input type=file сунуть файл из
event.dataTransfer.files, чтобы он потом отправился с формой?
2) Может я слишком загоняюсь и есть другие способы отправить файлы из
event.dataTransfer.files вместе с формой?
Заранее благодарю за ответы!
