Загрузка файла на сервер перетаскиванием Drag and Drop с использованием AJAX + PHP + JavaScript
Загрузка объекта(картинки, документа) на сервер без использования внешних библиотек, фреймворков и прочих обвесов. Голый, чистый PHP + JavaScript. Работает в большинстве браузеров.
В этом примере собраны все возможные способы передачи изображения на сервер:- Загрузка с локального диска
- Загрузка из сети по переданному 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 рублей (~2$) Вы можете приобрести представленный здесь пример загрузки файлов на сервер. Код также содержит все функции работы с изображениями. Код скрипта реализован на PHP, полностью открытый и не использует никаких дополнительных библиотек.
- Соглашение по использованию платной версии:
- Вы можете использовать полученный код в любых своих разработках, вы не обязаны указывать ссылку на источник.
- Вы НЕ имеете права перепродавать её, размещать в свободном или ограниченном доступе, а также публиковать в любом виде.
- Все остальные права сохраняются за автором.