HTML5 JavaScript POST файл загрузки - PullRequest
Новая
       7

HTML5 JavaScript POST файл загрузки

0 голосов
/ 27 февраля 2012

Недавно я пытался добавить простое перетаскивание HTML5 в мой уже простой скрипт загрузки php-файлов. Я прочитал много учебников и других решений, но я не могу понять, как отправить файл на серверную часть. Из того, что я понимаю, XMLHttpRequest отправит данные, но сделает это без перезагрузки страницы. Такого я не хочу. В настоящее время я использую скрипт, который будет принимать данные POST и выводить файл, например. ссылка на скачивание сервера, миниатюра изображения и т. д.

Как перетащить и отправить данные POST и получить доступ к выводу выгрузки или перезагрузить страницу?

Edit: Я использую следующее для перетаскивания: 

    <div id="drop_zone">Drag and drop a file here</div>

    <script>
          function handleFileSelect(evt) {
            evt.stopPropagation();
            evt.preventDefault();

            var files = evt.dataTransfer.files; // FileList object.


            uploadFile(files[0]); //<-- This is where most examples will use XMLHttpRequest to construct form and send data
          }

        function handleDragOver(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            document.getElementById('drop_zone').style.backgroundColor = "#faffa3";
            evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
        }
        function handleDragLeave(evt) {
            document.getElementById('drop_zone').style.backgroundColor = "";
        }

          // Setup the dnd listeners.
          var dropZone = document.getElementById('drop_zone');
          dropZone.addEventListener('dragover', handleDragOver, false);
          dropZone.addEventListener('drop', handleFileSelect, false);
          dropZone.addEventListener('dragleave', handleDragLeave, false);                 
    </script>

Ответы [ 2 ]

0 голосов
/ 29 февраля 2012

После продолжительного чтения и поиска я пришел к выводу, что то, что я изначально хотел, не может быть сделано.

Решение, с которым я иду, - просто иметь большое прозрачное / скрытое <input type="file"> покрытиезона падения.Удаляемое имя файла будет прочитано из ввода с помощью javascript и отображено в зоне удаления.Это, конечно, будет зависеть от браузера для поддержки перетаскивания файлов во входные файлы html.Оттуда мой сценарий загрузки будет в значительной степени работать так, как если бы пользователь использовал видимый селектор файлов.

Извинения за то, что я не слишком ясно понял, что я хотел.Я сам не был так уверен.И спасибо за ответы / комментарии.

0 голосов
/ 27 февраля 2012

Если вы используете JQuery или какую-либо другую библиотеку JavaScript с поддержкой событий, вы сможете перехватить событие перетаскивания и отправить свою форму.

http://docs.jquery.com/UI/API/1.8/Draggable

http://api.jquery.com/on/

Но не требуется XMLHttpRequest ...

...