Загрузка файла Drag & Drop

Итак, я немного борюсь, чтобы найти то, что я ищу, и как его реализовать.

У меня есть базовый загрузчик файлов PHP, в котором пользователь нажимает пользовательскую кнопку загрузки, выбирает файл, а затем использует JS, он проверяет изменение (то есть пользователь, выбирающий файл), а затем отправляет форму, которая загружает изображение в порядке.

То, что я также хочу сейчас, - это перетаскивание в область загрузки. Таким образом, пользователь может перетащить изображение из своего проводника файлов и отбросить его в определенном месте (не на всей странице), а затем после того, как это изображение было удалено, чтобы форма автоматически отправлялась с их изображением и использовала ту же обработку PHP.

Возможно ли это и реалистично?

Ответ 1

Это абсолютно реалистично и возможно без использования сторонних плагинов.

Следующие фрагменты должны дать вам представление о том, как он может работать:

Область падения

$(".drop-files-container").bind("drop", function(e) {
    var files = e.originalEvent.dataTransfer.files;
    processFileUpload(files); 
    // forward the file object to your ajax upload method
    return false;
});

метод processFileUpload() - метод:

function processFileUpload(droppedFiles) {
         // add your files to the regular upload form
    var uploadFormData = new FormData($("#yourregularuploadformId")[0]); 
    if(droppedFiles.length > 0) { // checks if any files were dropped
        for(var f = 0; f < droppedFiles.length; f++) { // for-loop for each file dropped
            uploadFormData.append("files[]",droppedFiles[f]);  // adding every file to the form so you could upload multiple files
        }
    }

 // the final ajax call

       $.ajax({
        url : "upload.php", // use your target
        type : "POST",
        data : uploadFormData,
        cache : false,
        contentType : false,
        processData : false,
        success : function(ret) {
                 // callback function
        }
       });

 }

пример формы

<form enctype="multipart/form-data" id="yourregularuploadformId">
     <input type="file" name="files[]" multiple="multiple">
</form>

Не стесняйтесь использовать что-то подобное в качестве отправной точки. Поддержка этого браузера вы можете найти здесь http://caniuse.com/#feat=xhr2

Конечно, вы можете добавить любые дополнительные функции, которые вам нравятся, как индикатор выполнения, предварительный просмотр, анимация...

Ответ 2

Пожалуйста, ознакомьтесь с этим плагином jQuery! С загрузкой файла Ajax и более: http://blueimp.github.com/jQuery-File-Upload/

Виджет загрузки файлов с несколькими выборами файлов, поддержкой перетаскивания и возврата, индикаторы выполнения и предварительные изображения для jQuery. Поддерживает междоменные, перезаряжаемые и возобновляемые загрузки файлов и изменение размера изображения на стороне клиента. Работает с любой серверной платформой (PHP, Python, Ruby on Rails, Java, Node.js, Go и т.д.), который поддерживает стандартные загрузки файлов в формате HTML.