Перетаскивание и Загрузка файлов

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

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

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

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

Author: Tenatious, 2013-02-12
Source

2 answers

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

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

Зона сброса

$(".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

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

 30
Author: wildhaber, 2014-10-27 18:51:33

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

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

 1
Author: Niels, 2013-02-12 14:41:14