Мэдээжийн хэрэг та эхлээд файлыг "барьж авах" элементийг үүсгэх хэрэгтэй. Нэмж дурдахад, бид ачаалах төлөвийн мессежийг харуулахын тулд энэ элементэд span шошго тавих болно оролттөрөлтэй файл, ингэснээр файлын сонголтыг чирэх, буулгах байдлаар хязгаарлахгүй, харин хэрэглэгчдэд энэ заасан талбар дээр дарж файл сонгох боломжийг олгоно. Ийм бүтцийн эцсийн хэлбэрийг доор үзүүлэв.

cssүүнд HTMLталбайн дизайныг эс тооцвол код нь онцгүй юм оролт:

#file( өргөн: 100%; өндөр: 100%; дэлгэц: блок; байрлал: үнэмлэхүй; дээд: 0; зүүн: 0; тунгалаг байдал: 0.01; )

Бид мөн файлын "барьж авах" талбарт нэмснээр амжилттай файл байршуулах эсвэл алдаа гарвал алдаа гарах дохио өгөх хоёр ангиллыг тайлбарлав.

#drop-zone.success( background-color:#2ecc71; ) #drop-zone.error( background-color:#e74c3c; )

Одоо бид хуудасныхаа "үйлдэл"-ийг бичихэд шилжиж болно. Нэгдүгээрт, хувьсагчид бидний байнга ханддаг объектуудын лавлагааг бичье:

Var dropZone = document.getElementById("drop-zone"); var msgConteiner = document.querySelector("#drop-zone .text");

Үүний дараа курсор манай файл хүлээн авах талбарт дараах байдлаар орж ирэхэд бид анхдагч үйл явдлуудаас салах болно.

Var eventClear = функц (e) ( e.stopPropagation(); e.preventDefault(); ) dropZone.addEventListener("dragenter", eventClear, худал); dropZone.addEventListener("dragover", eventClear, худал);

DropZone.addEventListener("drop", функц (e) (if(!e.dataTransfer.files) буцах; e.stopPropagation(); e.preventDefault(); sendFile(e.dataTransfer.files); ), худал); document.getElementById("file").addEventListener("өөрчлөх", функц (e) ( sendFile(e.target.files); ), худал);

Аль ч тохиолдолд үйл явдал нь функцийн дуудлагаар дуусдаг файл илгээх, хэрэглэгчээс хүлээн авсан файлыг шилжүүлсэн.

Энэ функц нь файлыг сервер рүү шилжүүлэх үүрэгтэй. Та түүний тайлбарыг доороос харж болно.

Var sendFile = function(file) ( // нэмэгдсэн байж болзошгүй төлөвийн ангиудыг устгана уу // хэрэв хэрэглэгч ямар нэгэн зүйл ачаалах гэж оролдсон бол dropZone.classList.remove("амжилт"); dropZone.classList.remove("алдаа") ; / / файлын төрлийг тогтмол илэрхийлэл шалгах // (жишээнд зөвхөн зураг байршуулахыг зөвшөөрсөн) var re = /(.jpg|.jpeg|.bmp|.gif|.png)$/i; if (!re. exec(file.name)) ( msgConteiner.innerHTML = "Файлын формат буруу!"; dropZone.classList.remove("амжилт"); dropZone.classList.add("алдаа"); ) else ( var fd = new FormData( ); // форм объект үүсгэх fd.append("upfile", файл); // маягтыг илгээхийн тулд файл нэмэх var xhr = new XMLHttpRequest(); xhr.open("POST", "./upload .php", үнэн ); xhr.upload.onprogress = showProgress; xhr.onreadystatechange = statChange; xhr.send(fd); // сервер рүү илгээх ) )

Та анзаарсан байх, сервер рүү өгөгдөл илгээхээс өмнө хоёр үйл явдлыг тохируулсан бөгөөд эхнийх нь татаж авах явцыг харуулах, хоёр дахь нь татаж авах үр дүнг мэдэгдэх үүрэгтэй. Тэд дараах байдлаар ажилладаг.

Var showProgress = function(e) ( if (e.lengthComputable) ( // ачааллын хувийг тооцоолох var хувь = Math.floor((e.loaded / e.total) * 100); // одоогийн msgConteiner хувийг харуулна. innerHTML = "Ачааж байна... ("+ хувь +"%)"; ) ); var statChange = функц (e) ( if (e.target.readyState == 4) ( // серверт хүсэлтийг боловсруулж дууссаны дараа if (e.target.status == 200)) ( // хэрэв хүсэлт амжилттай болсон бол msgConteiner.innerHTML = "Байршуулалт амжилттай боллоо!"; dropZone.classList.remove("алдаа"); dropZone.classList.add("амжилт"); document.getElementById("showUpFile").innerHTML = this.responseText; ) өөр ( // өөрөөр msgConteiner.innerHTML = "Алдаа гарлаа!"; dropZone.classList.remove("амжилт"); dropZone.classList.add("алдаа"); ) ) )

Эцсийн шат нь серверээс хүлээн авсан өгөгдлийг боловсруулах явдал юм.

Бид өөрсдийн бүтээлээ үргэлжлүүлсээр байна чирэх, буулгахтатаж аваад, өнөөдөр бид серверээ бичиж, бичиж эхэлнэ JavaScriptкод.

Сүүлийн нийтлэлд бид бичсэн индекс.htmlфайл болон түүнд зориулсан хэв маяг. Өнөөдөр бид файлуудыг татаж аваад тэдгээрийн талаарх мэдээллийг скрипт рүү буцааж илгээх сервер бичих болно, гэхдээ эхлээд бидний файлын бүтэц ямар байх талаар ярилцъя:

• .htaccess
• индекс.html
• style.css
• upload.php
• байршуулалт

Файлуудтай индекс.htmlболон style.cssбүгд ойлгомжтой. Файлд .htaccessБид ямар ч асуудал гарахгүйн тулд кодчиллыг л бичсэн.

AddDefaultCharset UTF-8

Файл upload.phpфайлуудыг серверт фолдерт байршуулах болно байршуулалт.

Ингээд эхэлцгээе php. Үүнийг хийхийн тулд файлыг нээнэ үү upload.phpмөн дараах зүйлийг бичнэ үү.

толгой("Агуулгын төрөл: application/json");

$байруулсан = массив();

If(!empty($_FILES["file"]["name"])) (
foreach($_FILES["файл"]["нэр"] $position => $name) (
if(move_uploaded_file($_FILES["file"]["tmp_name"][$position], "uploads/".$name)) (
$байруулсан = массив(
"нэр" => $нэр,
"файл" => "байршуулдаг/".$нэр
);
}
}
}

echo json_encode ($ байршуулсан);
?>

Файлын эхэнд бид толгойг бичдэг агуулгын төрөлвэб хөтчид юу авахыг хэлэх json. Дараа нь бид хоосон массив үүсгэдэг $ байршуулсанмөн ямар нэгэн файл байгаа эсэхийг шалгана уу. Хэрэв тийм бол тэдгээрийг давтаж, манай лавлах руу байршуулна уу байршуулалт, мөн бидний үндсэн массивыг бөглөнө үү $ байршуулсанфайлуудын талаарх мэдээллийг агуулсан дэд массивууд. Манай тохиолдолд энэ Файлын нэрболон түүний байршил. Эцэст нь бид массиваа хувиргадаг jsonтэгээд гаргаж ав. Таны харж байгаагаар сервер нь тийм ч төвөгтэй биш юм.

Одоо файл руугаа орцгооё. индекс.html

Ангиа санаарай .dragover, бидний сүүлчийн нийтлэлд бичсэн бөгөөд манай блок дээр ямар нэгэн файл байгаа үед үүнийг ашиглах болно гэж би хэлсэн үү? Энэ бол яг одоо бидний хийсэн зүйл юм. Блокны дээр файл гарч ирэхэд үйл явдал идэвхжинэ ondragoverЭнд бид зүгээр л ангиа нэмдэг .dragoverмөн текстийг өөрчил "Хулгана сулла". Бид хулганыг файлтай хамт блокноосоо холдуулах үед үйл явдал шатна ondragleave, энд бид бүх зүйлийг анхны байрлалдаа буцаана. Нэг хүн манай блок руу файл "шидэхэд" үйл явдал шатдаг унах. Тэнд бид бүх зүйлийг анхных шигээ өөрчилнө, эс тэгвээс манай анги "өлгөх" болно. .dragoverболон үндсэн зан үйлийг хүчингүй болгох. Хэрэв бид үүнийг хийхгүй бол бидний файл хөтөч дээр нээгдэх бөгөөд энэ нь бидэнд хэрэггүй болно.

HTML5-ийн шинэчлэлийн ачаар бүтээгээрэй Чирэх баУнтах интерфэйс нь илүү хялбар болсон. Харамсалтай нь эдгээр шинэлэг зүйл нь хөтөчийн өргөн дэмжлэгтэй хараахан байхгүй байгаа ч энэ нь удахгүй өөрчлөгдөнө гэж найдаж байна ( Энэ мөч Firefox 4+, Chrome болон Opera 11.10 дээр ажилладаг).

тэмдэглэгээ

Нийтлэлийг мэргэжлийн хүмүүсээс илүү эхлэгчдэд зориулж бичсэн гэдгийг би шууд хэлэх ёстой. Тиймээс зарим зүйлийг нарийвчлан тайлбарлах болно.

Эхлээд бид дараах агуулгатай HTML файл үүсгэх хэрэгтэй.

Байршуулахын тулд файлыг энд чирнэ үү.

Бидний бүх ажлыг dropZone саваар хийх болно. Одоо баримт бичигтээ (style.css) загвар нэмье:

Үндсэн хэсэг (фонт: 12px Arial, sans-serif; ) #dropZone (өнгө: #555; үсгийн хэмжээ: 18px; текстийг зэрэгцүүлэх: төвд; өргөн: 400px; дэвсгэр: 50px 0; захын зай: 50px авто; дэвсгэр: #eee ; хүрээ: 1px хатуу #ccc;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; ) #dropZone.hover (фон: #ddd; хүрээ-өнгө: #aaa; ) #dropZone.error ( дэвсгэр: #faa; хилийн өнгө: #f00; ) #dropZone.drop (фон: #afa; хилийн өнгө: #0f0; )

Загварын хувьд та dropZone элементийн гурван төлөвийг анзаарч болно: хулгана дээр, ямар нэг алдаа гарвал, амжилттай байна.

Скрипт татаж авах

Одоо бид хөгжилтэй хэсэг болох JavaScript код бичих рүү орох болно. Нэгдүгээрт, бид хувьсагчдыг үүсгэх хэрэгтэй бөгөөд тэдгээрийн аль нэгэнд нь dropZone-ээ байрлуулж, хоёр дахь нь файлын хамгийн дээд хэмжээг зааж өгөх болно.

$(баримт бичиг).ready(function() ( var dropZone = $("#dropZone"), maxFileSize = 1000000; // файлын дээд хэмжээ 1 mb. ));

Дараа нь бид хөтөч нь Drag and Drop-г дэмждэг эсэхийг шалгах хэрэгтэй бөгөөд үүний тулд бид FileReader функцийг ашиглах болно. Хэрэв хөтөч нь Drag and Drop-г дэмждэггүй бол dropZone элемент дотор "Browser дэмжигдээгүй!" гэж бичнэ. мөн "алдаа" анги нэмнэ.

Хэрэв (typeof(window.FileReader) == "тодорхойгүй") ( dropZone.text("Хөтөч дэмжигдээгүй!"); dropZone.addClass("алдаа"); )

Бидний хийх дараагийн зүйл бол файлыг dropZone руу чирэхэд үзүүлэх нөлөөг бий болгох явдал юм. Бид "ondragover" болон "ondragleave" үйл явдлуудыг ашиглан эдгээр үйлдлийг хянах болно. Гэхдээ эдгээр үйл явдлыг jQuery объект дээр хянах боломжгүй тул бид зөвхөн "dropZone" биш, харин "dropZone" руу хандах хэрэгтэй.

DropZone.ondragover = function() ( dropZone.addClass("hover"); худал буцаана; ); dropZone.ondragleave = function() ( dropZone.removeClass("hover"); худал буцаана; );

Одоо бид "ondrop" үйл явдлын зохицуулагчийг бичих хэрэгтэй - энэ нь чирсэн файлыг унагах үед тохиолддог үйл явдал юм. Зарим хөтчүүдэд файлуудыг хөтчийн цонх руу чирэх үед автоматаар нээгддэг тул ийм зүйл тохиолдохгүйн тулд бид хөтчийн стандарт ажиллагааг цуцлах хэрэгтэй. Мөн бид "hover" классыг устгаад "drop" анги нэмэх хэрэгтэй.

DropZone.ondrop = функц(үйл явдал) ( event.preventDefault(); dropZone.removeClass("hover"); dropZone.addClass("drop"); );

varfile = event.dataTransfer.files; if (file.size > maxFileSize) ( dropZone.text("Файл хэт том байна!"); dropZone.addClass("алдаа"); худал буцаана; )

Одоо бид файлыг боловсруулагч руу илгээдэг AJAX хүсэлтийг бичих хэрэгтэй. AJAX хүсэлтийг үүсгэхийн тулд бид XMLHttpRequest объектыг ашиглана. XMLHttpRequest объектод хоёр үйл явдал зохицуулагч нэмж оруулъя: нэг нь файл татаж авах явцыг харуулах ба хоёр дахь нь татаж авах үр дүнг харуулах болно. Бид upload.php файлыг зохицуулагчаар зааж өгөх болно.

varxhr = шинэ XMLHttpRequest(); xhr.upload.addEventListener("хөгжил", uploadProgress, худал); xhr.onreadystatechange = stateChange; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-FILE-NAME", file.name); xhr.send(файл);

Одоо татаж авах явц болон татаж авах үр дүнгийн функцуудыг авч үзье. "uploadProgress" функцэд төвөгтэй зүйл байхгүй, зүгээр л энгийн математик.

Функц uploadProgress(event) ( var хувь = parseInt(event.loaded / event.total * 100); dropZone.text("Ачааж байна: " + хувь + "%"); )

"StateChange" функцэд бид ачаалах процесс дууссан эсэхийг шалгах шаардлагатай бөгөөд хэрэв дууссан бол алдаа гарсан эсэхийг шалгах хэрэгтэй. Амжилттай хүсэлтийн код нь "200" бөгөөд хэрэв код нь үүнээс өөр бол энэ нь алдаа гарсан гэсэн үг юм.

Function stateChange(event) ( if (event.target.readyState == 4) ( if (event.target.status == 200) ( dropZone.text("Байршуулалт амжилттай дууссан!"); ) else ( dropZone.text(" Алдаа гарлаа!"); dropZone.addClass("алдаа"); ) ) )

JavaScript хэсгийг бичих ажил дууслаа.

Серверийн хэсэг

Бидний хувьд файлыг шаардлагатай байршилд хадгалах энгийн зохицуулагч бичих л үлдлээ. Хянагчийг бичихдээ би гүнзгийрэхгүй, зөвхөн PHP дээр жижиг жишээ хэлье.

Энэ бол нийтлэл танд хэрэгтэй байсан гэж найдаж байна.

Та эх файлуудыг татаж авах боломжтой

Магадгүй зарим тохиолдолд үйлчилгээний хөгжүүлэгчид буруутай байж болох ч ихэнхдээ хөтчүүдийн тавьсан хязгаарлалтад асуудал оршдог. Файлуудыг серверт байршуулах талаар бодож үзээрэй.

Ихэнх тохиолдолд компьютерээсээ файл сонгох товчлуур бүхий стандарт талбар болон/эсвэл вэбийн хаа нэгтээ байршуулсан файлын URL-г оруулах талбар гарч ирнэ.

-аас файлуудыг татаж байна орон нутгийн компьютерБид үүнд хараахан хүрэхгүй, би энэ сэдвээр тусдаа нийтлэл нийтлэхээр төлөвлөж байна, бид татан авалтыг шинжлэх болно алсын сервер.

Асуудал нь эхний алхамаас эхэлдэг. Хэдийгээр та URL хаягийг хаанаас хайхаа сайн ойлгож, firebug гэх мэт хэрэгслийг ашиглахдаа сайн байсан ч зөв хаягийг олохын тулд хулганын хэдэн товшилт хийх шаардлагатай хэвээр байна. Хүссэн зургийг хөтчийн нэг цонхноос нөгөө рүү чирэхэд илүү тохиромжтой байх болно.

Би энэ нийтлэлд ийм интерфейсийн хэрэгжилтийг харуулах болно. Хэрэв та хүсвэл энэ нь хэрхэн ажилладагийг demo хуудаснаас харах эсвэл эх архивыг татаж авах боломжтой.

Анхаар! Энэ жишээзөвхөн хөтөч дээр ажилладаг Гүүгл Кром. Онолын хувьд шаардлагатай бүх технологийг Firefox болон Safari дээр дэмждэг боловч би тэдэнтэй хараахан харьцаагүй байна.

Би "чирэх" объектын хувьд ихэвчлэн Википедиагаас зураг авсан. Зургийн URL-ууд дахь латин бус тэмдэгтүүдтэй холбоотой хэд хэдэн асуудал ажиглагдсан боловч жишээг шалгах, хувиргах замаар хэт ачаалахгүйн тулд би тэдгээрийг байгаагаар нь үлдээсэн.

Үйл ажиллагааны зарчим

Стандарт HTML5хуудасны объектуудыг "чирэх" дэмжлэг үзүүлдэг ( Чирэх, буулгах). Дашрамд хэлэхэд би D&D-ийн хамгийн энгийн хэрэгжилтийн жишээг аль хэдийн үзүүлсэн. Чирэх, буулгахашиглах HTML5.Үүнээс гадна D&D дэмжлэгийг хэрэгжүүлдэг нэлээн хэдэн JavaScript номын сан байдаг.

Гэхдээ хэрэв та гуравдагч талын эх сурвалжаас зураг "чирэх" шаардлагатай бол номын санг ашиглах боломжгүй болно гэдгийг ойлгох нь чухал юм. Учир нь та өөрийн JS кодыг хэн нэгний хуудсанд нэмэх боломжгүй. Мөн зураг байршуулахын тулд бид түүний URL хаягийг авах хэрэгтэй, i.e. Хөтөч нь чирсэн объектын хамт өөрийн параметрүүдийг (жишээ нь, зургийн src шинж чанар эсвэл бүхэлд нь img шошго) дамжуулах ёстой.

Энэ тохиолдолд бид хуудсан дээрээ зургийн "хүлээн авагч" үүсгэж болно. Энэ нь уналтын үйл явдал зохицуулагчтай ердийн div байх болно. Хэрэв хэрэглэгч энэ div дээрх зургийг "унасан" бол зохицуулагчийг дуудаж, эхний параметрт чирч буй зургийн талаархи мэдээллийг агуулсан объектыг хүлээн авах болно.

Хэрэгжилт

Манай програмын хуудаснаас эхэлцгээе.

Энэ нь хоёр блок агуулдаг: зургууд - энд бид байршуулсан зургуудыг харуулах бөгөөд img_target - та энэ блок руу зургуудыг чирэх хэрэгтэй.

Хуудасны доод хэсэгт холбогдоно уу jQuery номын санболон чирсэн зургийн талаарх мэдээллийг сервер рүү илгээх main.js скрипт.

main.js-г авч үзье

$(функц()(
$("#img_target")
.bind("dragent", функц(үйл явдал) (
$(энэ).addClass("drop_end");
худал буцаах;
})
.bind("dragleave", функц(үйл явдал) (
худал буцаах;
})
.bind("dragover", функц(үйл явдал) (
худал буцаах;
})
.bind("дусал", функц(үйл явдал) (
$(энэ).removeClass("drop_end");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("текст/html");
var img_data = srcRegex.exec(өгөгдөл);
$.post("upload.php", ("file_url":img_data), функц(res) (
var хариу = үнэлэх("(" + res + ")");
$("#зураг").adpend($(" "));
});
үнэнийг буцаах;
});

Энд бид dragenter, dragleave, dragover үйл явдлуудад зохицуулагчийг хуваарилдаг. Тэд бүгд зүгээр л худал гэж буцах ёстой бөгөөд ямар нэгэн байдлаар зургийг "унагах" боломжтой гэдгийг хэрэглэгчдэд мэдэгдэхийн тулд бид dragenter handler дахь хүлээн авагчийн блокийн drop_here CSS классыг тохируулсан.

Ихэнх ажлыг drop event handler дээр хийдэг. Энэ үйл явдал тохиолдоход бид "унасан" объектын талаарх мэдээллийг уншиж, src шинж чанарын утгыг "тайрах", i.e. Зургийн URL (мөр 16-18). Мэдээллийг event.originalEvent.dataTransfer объектод шилжүүлнэ (мөр 17).

Дараа нь бид ердийн AJAX хүсэлтийг үүсгэж, олсон URL-г параметр болгон дамжуулна.

Серверийн скрипт (upload.php) нь алсын сервер дээрх зургийн URL-г авч, байршуулах болно. Мөн AJAX хүсэлтийн хариуд байршуулсан зургийн шинэ URL-г илгээх болно.

Хариуд нь AJAX хүсэлт гаргагч нь img хаяг үүсгэж, дүрсний блокт оруулна. Тиймээс байршуулсан зургууд нь байршуулах талбар дээр гарч ирнэ.

upload.php-г анхаарч үзээрэй

define("BASE_URL", "http://localhost/tests/images-upload/");

функцийн upload_from_url($file_url) (
$url_segments = тэсрэх("/", $file_url);
$файлын_нэр = urldecode(төгсгөл($url_segments));
хэрэв (худал!== $файлын_нэр) (
$file_name_parts = тэсрэх(".", $файлын_нэр);
if (in_array(strtolower(end($file_name_parts))), array("jpeg","jpg","png","gif"))) (
$destination=fopen("байршуулах/".$файлын_нэр,"w");
$source=fopen($file_url,"r");
$maxsize=300*1024;
$урт=0;
while (($a=fread($source,1024))&&($length<$maxsize)) {
$урт=$урт+1024;
fwrite($destination,$a);
}
fclose($source);
fclose($destination);
}
}
$new_file_url = BASE_URL."upload/".$file_name;
$new_file_url буцаана;
}

$res = массив("err" => "Файлын URL заагаагүй");

хэрэв (isset($_POST["file_url"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = массив("file_url" => $new_url);
}

echo json_encode($res);

Үйл ажиллагааны зарчим нь дараах байдалтай байна. Бид зургийн URL-г уншиж, татаж авахыг оролддог (мөр 29-32).

Хэрэв зургийг байршуулсан бол байршуулах хавтсанд хадгална уу. Алсын серверээс зураг авах нь fread функцуудыг ашиглан хийгддэг. Файлыг 1кБ блокоор уншина (мөр 15-18). Энэ арга нь файлын хэмжээ нь заасан хязгаараас хэтэрсэн тохиолдолд (энэ тохиолдолд 300 кБ) файлыг татаж авах ажиллагааг зогсоох боломжийг танд олгоно.

Файлыг татаж авсны дараа бид URL хаягийг үүсгэж, хөтөч рүү илгээнэ json формат.

Таны харж байгаагаар ийм ачигчийг хэрэгжүүлэхэд хялбар байдаг. Мөн үүнийг ашиглахад маш тохиромжтой. Мэдээжийн хэрэг, гол дутагдал нь хөтчүүдийн HTML5-ийн дэмжлэг, эс тэгвээс энэ нь байхгүй байх явдал юм.

Гэсэн хэдий ч, хэрэв та зарим компанийн ажилчдад зориулсан интерфэйсийг үүсгэж байгаа бөгөөд хөтчийн төрлийг зааж өгөх боломжтой бол HTML5 ашиглаж болно.

Бүгдэд нь мэнд хүргэе! Энэ нийтлэлд би HTML5-тэй хийсэн туршилтуудын талаар ярихыг хүсч байна. Би холоос эхэлье. Бид бүгд үе үе янз бүрийн вэб интерфэйсүүдтэй ажиллах шаардлагатай болдог бөгөөд энэ ажлыг илүү үр дүнтэй зохион байгуулж болох юм шиг санагддаг.

Магадгүй зарим тохиолдолд үйлчилгээний хөгжүүлэгчид буруутай байж болох ч ихэнхдээ хөтчүүдийн тавьсан хязгаарлалтад асуудал оршдог. Файлуудыг серверт байршуулах талаар бодож үзээрэй. Ихэнх тохиолдолд танд компьютерээсээ файл сонгох товчлуур бүхий стандарт талбар болон/эсвэл вэбийн хаа нэгтээ байршуулсан файлын URL-г оруулах талбар гарч ирнэ.

Бид одоохондоо локал компьютерээс файл татаж авахад хөндөхгүй, би энэ сэдвээр тусдаа нийтлэл нийтлэхээр төлөвлөж байна, бид алсын серверээс татаж авахад дүн шинжилгээ хийх болно.

Асуудал нь эхний алхамаас эхэлдэг. Хэдийгээр та URL хаягийг хаанаас хайхаа сайн ойлгож, firebug гэх мэт хэрэгслийг ашиглахдаа сайн байсан ч зөв хаягийг олохын тулд хулганын хэдэн товшилт хийх шаардлагатай хэвээр байна. Хүссэн зургийг хөтчийн нэг цонхноос нөгөө рүү чирэхэд илүү тохиромжтой байх болно.

Би энэ нийтлэлд ийм интерфейсийг хэрэгжүүлэх жишээг харуулах болно. Хэрэв та хүсвэл энэ нь хэрхэн ажилладагийг demo хуудас эсвэл .

Анхаар! Энэ жишээ нь зөвхөн ажилладаг Google хөтөч Chrome. Онолын хувьд шаардлагатай бүх технологийг Firefox болон Safari дээр дэмждэг боловч би тэдэнтэй хараахан харьцаагүй байна. Би "чирэх" объектын хувьд ихэвчлэн Википедиагаас зураг авсан. Зургийн URL-ууд дахь латин бус үсэгтэй холбоотой хэд хэдэн асуудал ажиглагдсан боловч жишээг шалгах, хувиргах замаар хэт ачаалахгүйн тулд би тэдгээрийг байгаагаар нь үлдээсэн.

Үйл ажиллагааны зарчим

HTML5 стандарт нь хуудасны объектуудыг "чирэх" (чирж, буулгах) дэмжлэг үзүүлдэг. Дашрамд хэлэхэд би HTML5 ашиглан D&D - Drag & Drop програмын хамгийн энгийн хэрэгжилтийн жишээг аль хэдийн үзүүлсэн. Үүнээс гадна D&D дэмжлэгийг хэрэгжүүлдэг нэлээн хэдэн JavaScript номын сан байдаг.

Гэхдээ хэрэв та гуравдагч талын эх сурвалжаас зургийг "чирэх" шаардлагатай бол номын санг ашиглах боломжгүй болно гэдгийг ойлгох нь чухал юм. Учир нь та өөрийн JS кодыг хэн нэгний хуудсанд нэмэх боломжгүй. Мөн зураг байршуулахын тулд бид түүний URL хаягийг авах хэрэгтэй, i.e. Хөтөч нь чирсэн объектын хамт өөрийн параметрүүдийг (жишээ нь, зургийн src шинж чанар эсвэл бүхэлд нь img шошго) дамжуулах ёстой.

Энэ тохиолдолд бид хуудсан дээрээ зургийн "хүлээн авагч" үүсгэж болно. Энэ нь уналтын үйл явдал зохицуулагчтай ердийн div байх болно. Хэрэв хэрэглэгч энэ div дээрх зургийг "унасан" бол зохицуулагчийг дуудах бөгөөд эхний параметрт чирсэн зургийн талаархи мэдээллийг агуулсан объектыг хүлээн авах болно.

Хэрэгжилт

Манай програмын хуудаснаас эхэлцгээе.

Зураг байршуулах

Энэ нь хоёр блок агуулдаг: зургууд - энд бид байршуулсан зургуудыг харуулах бөгөөд img_target - та энэ блок руу зургуудыг чирэх хэрэгтэй. Хуудасны доод хэсэгт бид jQuery номын сан болон чирсэн зургийн талаарх мэдээллийг сервер рүү илгээх main.js скриптийг оруулсан болно.

main.js-г авч үзье
$(функц()(
$("#img_target")
.bind("dragent", функц(үйл явдал) (
$(энэ).addClass("drop_end");
худал буцаах;
})
.bind("dragleave", функц(үйл явдал) (

худал буцаах;
})
.bind("dragover", функц(үйл явдал) (
худал буцаах;
})
.bind("дусал", функц(үйл явдал) (
$(энэ).removeClass("drop_end");
var srcRegex = /src=\"([^\s]+)\"/ig;
var data = event.originalEvent.dataTransfer.getData("текст/html");
var img_data = srcRegex.exec(өгөгдөл);
$.post("upload.php", ("file_url":img_data), функц(res) (
var хариу = үнэлэх("(" + res + ")");
$("#зураг").adpend($(""));
});
үнэнийг буцаах;
});
});
Энд бид dragenter, dragleave, dragover үйл явдлуудад зохицуулагчийг хуваарилдаг. Тэд бүгд зүгээр л худал гэж буцах ёстой бөгөөд ямар нэгэн байдлаар хэрэглэгчдэд зургийг "унагах" боломжтой гэдгийг мэдэгдэхийн тулд бид dragenter зохицуулагч дахь хүлээн авагчийн блокийн drop_here CSS ангиллыг тохируулсан. Ихэнх ажлыг drop event handler дээр хийдэг. Энэ үйл явдал тохиолдоход бид "унасан" объектын талаарх мэдээллийг уншиж, src шинж чанарын утгыг "тайрах", i.e. Зургийн URL. Мэдээллийг event.originalEvent.dataTransfer объектод шилжүүлнэ.

Дараа нь бид ердийн AJAX хүсэлтийг үүсгэж, олсон URL-г параметр болгон дамжуулна. Серверийн скрипт (upload.php) нь алсын сервер дээрх зургийн URL-г авч, байршуулах болно. Мөн AJAX хүсэлтийн хариуд байршуулсан зургийн шинэ URL-г илгээх болно. Хариуд нь AJAX хүсэлт гаргагч нь img хаяг үүсгэж, дүрсний блокт оруулна. Тиймээс байршуулсан зургууд нь байршуулах талбар дээр гарч ирнэ.

upload.php-г анхаарч үзээрэй

Тодорхойлох("BASE_URL", "http://localhost/tests/images-upload/");

Функц upload_from_url($file_url) (
$url_segments = тэсрэх("/", $file_url);
$файлын_нэр = urldecode(төгсгөл($url_segments));
хэрэв (худал!== $файлын_нэр) (
$file_name_parts = тэсрэх(".", $файлын_нэр);
if (in_array(strtolower(end($file_name_parts))), array("jpeg","jpg","png","gif"))) (
$destination=fopen("байршуулах/".$файлын_нэр,"w");
$source=fopen($file_url,"r");
$maxsize=300*1024;
$урт=0;
while (($a=fread($source,1024))&&($length<$maxsize)) {
$урт=$урт+1024;
fwrite($destination,$a);
}
fclose($source);
fclose($destination);
}
}
$new_file_url = BASE_URL."upload/".$file_name;
$new_file_url буцаана;
}

$res = массив("err" => "Файлын URL заагаагүй");

Хэрэв (isset($_POST["file_url"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = массив("file_url" => $new_url);
}

echo json_encode($res);
?>
Үйл ажиллагааны зарчим нь дараах байдалтай байна. Бид зургийн URL-г уншаад татаж авахыг оролдоно. Хэрэв зургийг байршуулсан бол байршуулах хавтсанд хадгална уу. Алсын серверээс зураг авах нь fread функцуудыг ашиглан хийгддэг. Файлыг 1кБ хэмжээтэй блокоор уншина. Энэ арга нь файлын хэмжээ нь заасан хязгаараас хэтэрсэн тохиолдолд (энэ тохиолдолд 300 кБ) файлыг татаж авах ажиллагааг зогсоох боломжийг танд олгоно.

Файлыг татаж авсны дараа бид URL хаягийг үүсгэж, JSON форматаар хөтөч рүү илгээдэг. Таны харж байгаагаар ийм ачигчийг хэрэгжүүлэхэд хялбар байдаг. Мөн үүнийг ашиглахад маш тохиромжтой. Мэдээжийн хэрэг, гол сул тал бол HTML5-ийг хөтчөөр дэмждэг, эс тэгвээс энэ нь байхгүй байх явдал юм.Гэхдээ хэрэв та зарим компанийн ажилчдад зориулсан интерфэйсийг үүсгэж байгаа бөгөөд хөтчийн төрлийг зааж өгвөл HTML5 ашиглаж болно.