Загрузка файла на сервер перетаскиванием Drag and Drop с использованием AJAX + PHP + JavaScript

Загрузка объекта(картинки, документа) на сервер без использования внешних библиотек, фреймворков и прочих обвесов. Голый, чистый PHP + JavaScript. Работает в большинстве браузеров.

В этом примере собраны все возможные способы передачи изображения на сервер:

• Загрузка с локального диска
• Загрузка из сети по переданному URL-у
• Загрузка перетаскиванием

Изображение(10Kb):

url: или
файл:

define("max_size_image",'200000');    // максимальный размер загружаемого изображения
?>
<style type="text/css"><!--
.drag {
border: 1px solid rgb(0, 0, 0); padding: 10px; width:500px;
}
//--></style>
<form enctype="multipart/form-data" method="POST" action="/" target="upload_frame"
    onsubmit='document.getElementById("upload_frame").style.display="block"' id="file_form">
<fieldset class="drag"
     ondragenter="event.stopPropagation(); event.preventDefault();"
     ondragover="event.stopPropagation(); event.preventDefault();"
     ondrop="return dodrop(event);" >
<legend> Изображение(<<?=(max_size_image/1000)?>Kb): </legend>
<input name="MAX_FILE_SIZE" type="hidden" value="<?=max_size_image?>" />
url: <input type="text" name="img_url" size=75 /> или<br>
файл: <input type="file" name="img" size=65 id="file" />
<input type="submit" value="Загрузить" />
</fieldset>
</form>
<iframe id="upload_frame" name="upload_frame" width="95%" height="30" style="display:none;border:0"></iframe>

<script language="JavaScript"><!--
function dodrop(e)
{
  var dt = e.dataTransfer;
  if(!dt&&!dt.files) return;
  var files = dt.files;
  dt.dropEffect="copy";
  for (var i = 0; i < files.length; i++) {
        //uf.textContent+=" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " + files[i].name + " " + files[i].size + "\n";
    ajaxUpLoad('upload_dev','load.php?img=',files[i],'Загрузка на сервер...');
    }
  e.stopPropagation();
  e.preventDefault();

return false;
}

function ajaxUpLoad(obj,url,file,defMessage){
  var ajaxObj = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
  if (defMessage) document.getElementById(obj).innerHTML=defMessage;
  name= file.fileName || file.name;
  ajaxObj.open('POST', url+name,true);
  ajaxObj.setRequestHeader("Referer", location.href);
  ajaxObj.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  ajaxObj.setRequestHeader("X-File-Name", encodeURIComponent(name));
  ajaxObj.setRequestHeader("Content-Type", "application/octet-stream");
  ajaxObj.onreadystatechange=ajaxCallBack(obj,ajaxObj,null);
  ajaxObj.send(file);
}

function ajaxCallBack(obj, ajaxObj, callback){
return function(){
    if(ajaxObj.readyState == 4){
       if(callback) if(!callback(obj,ajaxObj))return;
       if (ajaxObj.status==200){
            if(ajaxObj.getResponseHeader("Content-Type").indexOf("application/x-javascript")>=0)
              eval(ajaxObj.responseText);
        else document.getElementById(obj).innerHTML=ajaxObj.responseText;
        }
       else document.getElementById(obj).innerHTML=ajaxObj.status+' '+ajaxObj.statusText;
    }
}}


//--></script>

Упрощенный пример скрипта приема файла отправленного перетаксиванием:

if(isset($_GET['img'])) {
        $input=fopen("php://input", "r");
        $fil='price_image.'.GetExt($_GET['img']);
    $f=fopen($fil, "w+");
        $realSize=stream_copy_to_stream($input, $f);
        fclose($input); fclose($f);
        if (isset($_SERVER["CONTENT_LENGTH"]) &&
        $realSize != intval($_SERVER["CONTENT_LENGTH"]) ) die("Ошибка загрузки!");
    echo " Сохранил <b>".$fil."</b>!";
}elseif(isset($_POST['img'])) {
// запрос через ajax
  if(SaveFile('img', 'path_image'))
    echo " Сохранил <b>".'price_image.jpg'."</b>!";
}

Функция SaveFile - сохраняет файл с url или переданный через post. Описана в примере Передача изображения на сервер через форму.

Всего за 150 рублей (~3$) Вы можете приобрести представленный здесь пример загрузки файлов на сервер. Код также содержит все функции работы с изображениями. Код скрипта реализован на PHP, полностью открытый и не использует никаких дополнительных библиотек.

Соглашение по использованию платной версии:
• Вы можете использовать полученный код в любых своих разработках, вы не обязаны указывать ссылку на источник.
• Вы НЕ имеете права перепродавать её, размещать в свободном или ограниченном доступе, а также публиковать в любом виде.
• Все остальные права сохраняются за автором.

Регистрация Войти Войти через VK Войти через FB Войти через Google Войти через Яндекс

При нажатии кнопки Оплатить и загрузить, Вы подтверждаете согласие с условиями использования скрипта, описанными на этой странице.
Вы будете перенаправлены на страницу выбора способа оплаты, после оплаты 150 рублей (~3$) начнется загрузка файла.
Чтобы мы не потеряли Вашу оплату при потере соединения, укажите Ваш действующий
адрес электронной почты
Сомневаетесь? Вы всегда сможете задать вопросы и получить помощь.