Форум программистов, компьютерный форум, киберфорум
Наши страницы
jQuery
Войти
Регистрация
Восстановить пароль
 
sendxt
9 / 9 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
#1

Drag and drop - jQuery

20.10.2017, 17:56. Просмотров 103. Ответов 0
Метки нет (Все метки)

Кто-то может что-то похожее делал или может помочь адаптировать "мой код", в кавычках потому что я его на гуглил.. )

Он в принципе работает хорошо, но хорошо кроме-то того что сам файл не добавляется к инпуту формы.. при отправке формы в request'e нету этого файла..

У меня задача стоит добавить поле drag and drop на данный момент есть просто инпут и добавляется файл с помощью кнопки browse,

добавив этот а код есть поле , после отправки файла выводится инфа о файле в блоке... но к инпуту файл не прикрепляется как это сделать?


HTML5
1
2
3
4
5
<div id="filedrag">or drop files here</div>
 
            <div id="messages">
                <p>Status Messages</p>
            </div>

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
function ParseFile(file) {
 
                Output(
                    "<p>File information: <strong>" + file.name +
                    "</strong> type: <strong>" + file.type +
                    "</strong> size: <strong>" + file.size +
                    "</strong> bytes</p>"
                );
 
            }
 
            // getElementById
            function $id(id) {
                return document.getElementById(id);
            }
 
 
            // output information
            function Output(msg) {
                var m = $id("messages");
                m.innerHTML = msg + m.innerHTML;
            }
 
 
            // call initialization file
            if (window.File && window.FileList && window.FileReader) {
                Init();
            }
 
 
            // initialize
            function Init() {
 
                var fileselect = $id("attachment_file"),
                    filedrag = $id("filedrag"),
                    submitbutton = $id("submitbutton");
 
                // file select
                fileselect.addEventListener("change", FileSelectHandler, false);
 
                // is XHR2 available?
                var xhr = new XMLHttpRequest();
                if (xhr.upload) {
 
                    // file drop
                    filedrag.addEventListener("dragover", FileDragHover, false);
                    filedrag.addEventListener("dragleave", FileDragHover, false);
                    filedrag.addEventListener("drop", FileSelectHandler, false);
                    filedrag.style.display = "block";
 
                    // remove submit button
                    submitbutton.style.display = "none";
                }
            }
 
 
            // file drag hover
            function FileDragHover(e) {
                e.stopPropagation();
                e.preventDefault();
                e.target.className = (e.type == "dragover" ? "hover" : "");
            }
 
            // file selection
            function FileSelectHandler(e) {
 
                // cancel event and hover styling
                FileDragHover(e);
 
                // fetch FileList object
                var files = e.target.files || e.dataTransfer.files;
 
                // process all File objects
                for (var i = 0, f; f = files[i]; i++) {
                    ParseFile(f);
                }
 
            }
Добавлено через 18 минут
после ParseFile(f);

Javascript
1
$('#attachment-file').val(f); //SecurityError: The operation is insecure.
Добавлено через 24 минуты
Как этот полученый файл из window.file добавить к инпуту? это реально?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
20.10.2017, 17:56
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Drag and drop (jQuery):

Drag and drop
Есть список статей, хочу менять их местами с помощью drag and drop подскажите...

Drag'n drop
Я просто ЗА..мучалса. Интересует реализация загрузки файлов при перетаскивании...

Drag and Drop
Drag and Drop Подскажите пожалуйста как сохранить перетаскиваемый элемент в...

Проблема с Drag'n'Drop
Собственно есть Jquery скрипт с технологие возьми и брось. Дело обстоит так:...

Drag and Drop в jQuery
Всем, здравствуйте! Ребята, пытаюсь работать с элементом canvas, измучился...

Неудобство в drag'n'drop
в сортировке sortable блоки которые тащишь очень большие, нужно сделать так...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.10.2017, 17:56
Привет! Вот еще темы с решениями:

Drag and Drop с условием
У меня 10 объектов одного класса и разными идентификаторами. Один приемник. Как...

Эмуляция Drag and Drop на слайдере
Подскажите возможно ли с эмулировать Drag and Drop на слайдере Если да , то...

Drag and Drop для планшетов
Суть вопроса таково меня интересует как организовывается Drag and Drop для...

Drag n drop с записью координаты
Добрый день Есть объект у которого необходимо определить координату на карте в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru