Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov
Загрузка файла на сервер перетаскиванием 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 рублей (~3$) Вы можете приобрести представленный здесь пример загрузки файлов на сервер. Код также содержит все функции работы с изображениями. Код скрипта реализован на PHP, полностью открытый и не использует никаких дополнительных библиотек.
- Соглашение по использованию платной версии:
- Вы можете использовать полученный код в любых своих разработках, вы не обязаны указывать ссылку на источник.
- Вы НЕ имеете права перепродавать её, размещать в свободном или ограниченном доступе, а также публиковать в любом виде.
- Все остальные права сохраняются за автором.
Регистрация Войти Войти через VK Войти через FB Войти через Google Войти через Яндекс