Отправка файла на сервер php

188

02 июля 2018, 11:10

Есть вот такой дизайн формы добавления файла http://joxi.ru/Grqly7PtQkJ8VA. Сделать такой дизайн через форму у меня не получилось и я сделал ее через div. Сложность у меня в том, что я не знаю как мне получить файл который перетащили, и отправить его на сервер. Подскажите пожалуйста как мне это сделать. Вот мой код:

$('.carousel').carousel({ 
    interval: 5000, 
    pause: false 
}); 
 
/* Перетаскивание файла*/ 
$(document).ready(function (event) { 
    var dropZone = $('#dropZone'); 
    maxFilesSize = 1000000; 
 
    /* Проверяем на поддержки drag and drop*/ 
    if (typeof(window.FileReader) == 'undefined') { 
        dropZone.text('Не поддерживается браузером!'); 
        dropZone.addClass('error'); 
    }; 
    /* Добавляем эффект при навидении*/ 
    dropZone[0].ondragover = function() { 
        dropZone.addClass('hover'); 
        return false; 
    }; 
 
    dropZone[0].ondragleave = function() { 
        dropZone.removeClass('hover'); 
        return false; 
    }; 
    dropZone[0].ondrop = function(event) { 
        event.preventDefault(); 
        dropZone.removeClass('hover'); 
        dropZone.addClass('drop'); 
        var data = event.dataTransfer.files[0]; 
        $.ajax({ 
            url: 'upload.php', 
            data: data, 
            cache: false, 
            contentType: false, 
            processData: false, 
            type: 'POST', 
            success: function (data) { 
                console.log(data); 
            }, 
            complete: function (data) { 
            } 
        }); 
    }; 
});

#dropZone { 
    width: inherit; 
    height: inherit; 
} 
 
#dropZone.hover { 
    background: #ddd; 
    border-color: #aaa; 
    opacity: 0.3; 
} 
 
#dropZone.error { 
    background: #faa; 
    border-color: #f00; 
}

 <div id="dropZone"> 
 
            </div>

Answer 1

Если нет опыта, то лучше воспользоваться каким-то готовым решением. В гугле по запросу «drag and drop file upload jquery» получите массу ссылок на готовые решения с рабочим кодом. Например dropzonejs.com приводит хорошую инструкцию и примеры.