Блог

Главная - Вопросы по программированию - Загрузка файла перетаскиванием файла HTML 5 через php

Загрузка файла перетаскиванием файла HTML 5 через php

#php #html #file-upload #drag-and-drop

#php #HTML #загрузка файлов #перетаскивание

Вопрос:

Хорошо, здесь немного сложно — я думаю, я смотрю на pangratz / dnd-file-upload, перетаскивание отличное и т. Д. (я не знаю, что кроссбраузерный и т. Д., Но это не имеет значения), Но чего я не могу сделать, так это создать правильный php-код для обработки фактической загрузки.

Вот базовый код js

 $(document).ready(function(){

            $.fn.dropzone.uploadStarted = function(fileIndex, file){
                var infoDiv = $("<div></div>");
                infoDiv.attr("id", "dropzone-info"   fileIndex);
                infoDiv.html("upload started: "   file.fileName);

                var progressDiv = $("<div></div>");
                progressDiv.css({
                    'background-color': 'orange',
                    'height': '20px',
                    'width': '0%'
                });
                progressDiv.attr("id", "dropzone-speed"   fileIndex);

                var fileDiv = $("<div></div>");
                fileDiv.addClass("dropzone-info");
                fileDiv.css({
                    'border' : 'thin solid black',
                    'margin' : '5px'
                });
                fileDiv.append(infoDiv);                
                fileDiv.append(progressDiv);                

                $("#dropzone-info").after(fileDiv);
            };
            $.fn.dropzone.uploadFinished = function(fileIndex, file, duration){
                $("#dropzone-info"   fileIndex).html("upload finished: "   file.fileName   " (" getReadableFileSizeString(file.fileSize) ") in "   (getReadableDurationString(duration)));
                $("#dropzone-speed"   fileIndex).css({
                    'width': '100%',
                    'background-color': 'green' 
                });
            };
            $.fn.dropzone.fileUploadProgressUpdated = function(fileIndex, file, newProgress){
                $("#dropzone-speed"   fileIndex).css("width", newProgress   "%");
            };
            $.fn.dropzone.fileUploadSpeedUpdated = function(fileIndex, file, KBperSecond){
                var dive = $("#dropzone-speed"   fileIndex);

                dive.html( getReadableSpeedString(KBperSecond) );
            };
            $.fn.dropzone.newFilesDropped = function(){
                $(".dropzone-info").remove();
            };
            $("#dropzone").dropzone({
                url : "upload.php",
                printLogs : true,
                uploadRateRefreshTime : 500,
                numConcurrentUploads : 2
            });

        });

Но я не могу получить upload.php работать любым способом

   $tempFile = $_FILES['Filedata']['tmp_name'];
    $targetPath = '';
    $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
move_uploaded_file($tempFile,$targetFile);
        echo str_replace($_SERVER['DOCUMENT_ROOT'],'',$targetFile);

Предложения и т.д. добро пожаловать, все, что мне нужно сделать, это загрузить исходное изображение на сервер и сохранить его в БД (неплохо сохраняется, как только я смогу перетащить изображение для перемещения на сервер. О, я не хочу использовать стороннее приложение.

Заранее спасибо

Комментарии:

1. Я не получаю никаких ошибок, потому что upload.php скрипт просто не работает 😉

2. Aggg Я думаю, что я случайно удалил комментарий от Дэмиена — извините

3. Есть сообщения об ошибках? Проверил ваши журналы ошибок консоли js / php? «Не работает» не очень полезно, если вам нужна помощь.

4. Джонс — я не вижу ошибок, которые я вижу, даже пытается выдать предупреждение в $(«#dropzone»).dropzone({ }), но там тоже ничего нет?

5. Я попробовал код: upload.php правильно называется. Но он не может найти $_FILES[‘Filedata’] . В соответствии с заголовком метод запроса на upload.php это СООБЩЕНИЕ с составными / form-данными. Но он не может найти имя размещенной переменной, потому что это ajax-запрос, поэтому я думаю, что $_FILES не задан.

Ответ №1:

Я пока не нахожу, как это сделать с помощью вашей библиотеки перетаскивания. Потому что я думаю, что запрос ajax не устанавливает $ _FILES . Я знаю, что это не полное решение, но если вам действительно нужен быстрый ответ, вот он :

jquery-filedrop

С помощью этой библиотеки вы можете отправлять переменные POST, устанавливая ‘paramname’. 

 $('#dropzone').filedrop({
    url: 'upload.php',              // upload handler, handles each file separately
    paramname: 'Filedata',

при этом ваш php-код должен работать. Я уже использовал его, это довольно просто.
надеюсь, это поможет.