Задумка следующая, путем js, я делаю drag-drop файла, нескольких файлов, но как правильно в конечном итоге сформировать input[type=file], чтобы по сути js создавало лишь красивую обертку загрузку файлов, но никак не работало бы с backend'ом и на выходе получался обычный input с типом file *правда скрытый от глаз пользователя
<input name="file" type="file" multiple class="input-dropzone" data-dropzone-id="1" id="input-dropfile-1">
И если нужно уже сделанная логика JS с куском кода:
1) скрываем input по умолчанию
2) добавляем перед ним нашу форму
3) отлавливаем события перетаскивания на него файлов, либо по клику делаем, будто кликнули на данный input
var Dropfile = function (element, id, options) {
var $el = $(element);
// Скрываем input по умолчанию
$el.css({
'display': 'none'
});
// Добавляем поле, для перемещения файлов
$el.before('<div class="dropfile-zone-wrap" id="dropfile-zone-wrap-'+id+'" data-dfz-id="'+id+'"><div class="dropfile-zone dfzt-open" id="dropfile-zone-'+id+'" data-dfz-id="'+id+'">'+options.placeholder+'</div></div>');
// Добавляем событие на клик
$('#dropfile-zone-'+id).bind('click', {thisId: id}, function(el) {
$(options.baseFileID + el.data.thisId).trigger('click');
});
// Событие на перетаскивание файла
$('#dropfile-zone-'+id)
.bind('click', {thisId: id}, function(el) {
$(options.baseFileID + el.data.thisId).trigger('click');
})
.bind('dragover', {thisId: id}, function(el) {
$(this).addClass('drag-over');
el.preventDefault();
el.stopPropagation();
})
.bind('dragleave', {thisId: id}, function(el) {
$(this).removeClass('drag-over');
el.preventDefault();
el.stopPropagation();
})
.bind('drop', {thisId: id}, function(el) {
$(this).removeClass('drag-over');
if ( ! el.originalEvent.dataTransfer ) return;
if( ! el.originalEvent.dataTransfer.files.length ) return;
el.preventDefault();
el.stopPropagation();
// На этом тормоз... Т.к. сперва нужно определить что должно быть на выходе
console.log(el.originalEvent.dataTransfer.files);
});
}
