لأن العنوان مثال ، لن أشرح هذه المرة ، لأنني قمت أيضًا بتجميع هذا المثال معًا. لقد أشرت إلى حوالي 5 أو 6 مكونات سحرية وعروض تجريبية ، ثم اختارت أفضل الأحداث ، وأصبحت أخيرًا مثالاً. دعنا نلقي نظرة (لا يمكن ضمان أن يكون العنوان فعالاً لفترة طويلة. إذا فشل ، فيرجى النقر على العرض التوضيحي في نهاية المقالة للتنزيل):
أشير إلى موقع ألبوم صور أجنبي. التغييرات ليست كبيرة ، ولكن تم تحويل نمط أغنية الطيور إلى صينية ، كما تم تغيير نمط التحميل. سبب اختيار هذا هو أنه من السهل بالنسبة لي التوسع. وهو يدعم ثلاث طرق لإضافة صور ، واحدة لتحميل السحب والإفلات ، واحدة لتحميل ملف منتظم ، والآخر هو إضافة صور الشبكة. يدمج بذكاء أوضاع التحميل الثلاثة معًا ، ويمكنك تصفحها مع متصفح IE. إذا لم يتم دعم HTML5 ، فلا يوجد موجه لتحميل الصور ، كما هو موضح في الصورة:
أهم شيء في تحميل السحب والإفلات هو رمز جزء JS ، الذي ينفذ 70 ٪ من الوظائف ، والآخر 30 ٪ يقدمون ببساطة معلومات الصورة إلى الخلفية ، ثم تقوم بالمعالجة المقابلة ، مثل الضغط ، المحاصيل ، وما إلى ذلك. لذلك دعونا نلقي نظرة على رمز تنفيذ JS أولاً.
$ (). Ready (function () {
if ($. browser.safari || $ .browser.mozilla) {
$ ('#dtb-msg1. compatible'). show () ؛
$ ('#dtb-msg1. notcompatible'). Hide () ؛
$ ('#drop_zone_home'). hover (function () {
$ (هذا).
}،وظيفة(){
$ (هذا).
}) ؛
// تنفيذ الوظيفة
$ (وثيقة) .on ({
Dragleave: Function (E) {
E.PreventDefault () ؛
$ ('. dashboard_target_box'). removeClass ('Over') ؛
} ،
Drop: Function (E) {
E.PreventDefault () ؛
//$('.dashboard_target_box'm).removeClass('over ') ؛
} ،
Dragenter: function (e) {
E.PreventDefault () ؛
$ ('. dashboard_target_box'). addClass ('Over') ؛
} ،
Dragover: function (e) {
E.PreventDefault () ؛
$ ('. dashboard_target_box'). addClass ('Over') ؛
}
}) ؛
var box = document.getElementById ('target_box') ؛
box.addeventListener ("Drop" ، function (e) {
E.PreventDefault () ؛
// احصل على قائمة الملفات
var fileList = e.datatransfer.files ؛
var img = document.createElement ('img') ؛
// اكتشف ما إذا كان يتم سحب الملف إلى الصفحة
if (fileList.length == 0) {
$ ('. dashboard_target_box'). removeClass ('Over') ؛
يعود؛
}
// اكتشف ما إذا كان الملف صورة
if (fileList [0] .type.indexof ('Image') === -1) {
$ ('. dashboard_target_box'). removeClass ('Over') ؛
يعود؛
}
if ($. browser.safari) {
// chrome8+
img.src = window.webkiturl.createObjecturl (fileList [0]) ؛
} آخر إذا ($. browser.mozilla) {
// FF4+
img.src = window.url.createObjecturl (fileList [0]) ؛
}آخر{
// إنشاء كائن قارئ الملف
var reader = new FileReader () ؛
reader.onload = function (e) {
img.src = this.result ؛
$ (document.body) .AppendChild (IMG) ؛
}
reader.readasdataurl (fileList [0]) ؛
}
var xhr = new xmlhttprequest () ؛
XHR.Open ("post" ، "test.php" ، true) ؛
XHR.SetRequestHeader ("X-requested-with" ، "XMLHTTPrequest") ؛
xhr.upload.addeventListener ("Progress" ، Function (E) {
$ ("#dtb-msg3"). hide () ؛
$ ("#dtb-msg4 span"). show () ؛
$ ("#dtb-msg4"). الأطفال ('span'). Eq (1) .css ({width: '0px'}) ؛
$ ('. show'). html ('') ؛
if (e.LengthComputable) {
var loaded = math.ceil ((E.Loaded / E.Total) * 100) ؛
$ ("#dtb-msg4"). الأطفال ('span'). eq (1) .css ({width: (loaded*2)+'px'}) ؛
}
}، خطأ شنيع)؛
XHR.AdDeventListener ("load" ، function (e) {
$ ('. dashboard_target_box'). removeClass ('Over') ؛
$ ("#dtb-msg3"). show () ؛
$ ("#dtb-msg4 span"). Hide () ؛
var result = jquery.parsejson (e.target.Responsetext) ؛
تنبيه (result.filename) ؛
$ ('. show'). append (result.img) ؛
}، خطأ شنيع)؛
var fd = new formData () ؛
fd.append ('xfile' ، fileList [0]) ؛
XHR.SEND (FD) ؛
}،خطأ شنيع)؛
}آخر{
$ ('#dtb-msg1. compatible'). Hide () ؛
$ ('#dtb-msg1. notcompatible'). show () ؛
}
}) ؛
في البداية ، قمت أولاً بالحكم على نوع المتصفح ، لأنني عندما قدمت للتو ، ترى المتصفحات المختلفة واجهات مختلفة. يبدأ التنفيذ الرئيسي للرمز بتنفيذ الوظيفة. لن أقول الكثير عن سبب عمله وما هو المبدأ. يمكنك الرجوع إلى هذه المقالة: "شرح مفصل لـ Drag and Drop Loash على الصفحة الرئيسية Renren (HTML5 Drag & Drop ، FileReader API ، FormData)". ومع ذلك ، فإن الكود في جزء تحميل Ajax لا يزال مختلفًا بعض الشيء ، لأن Renren يبدو أنه مزعج بعض الشيء ، لذلك سأجد طريقة أخرى.
أخيرًا ، أقوم بتحميل جزء من رمز PHP. أنا هنا فقط أقدم مرجعًا ، يمكنك كتابته بنفسك وفقًا لاحتياجات المشروع.
$ r = new stdClass () ؛
header ('نوع المحتوى: التطبيق/json') ؛
$ maxSize = 10 ؛ // ميغابايت
if ($ _ files ['xfile'] ['size']> ($ maxSize * 1048576)) {
$ r-> error = "حجم الصورة لا يتجاوز $ maxSize MB" ؛
}
المجلد $ = 'files/' ؛
if (! is_dir ($ folder)) {
mkdir (مجلد $) ؛
}
المجلد $. = $ _post ['Folder']؟ $ _post ['Folder']. '/': '' ؛
if (! is_dir ($ folder)) {
mkdir (مجلد $) ؛
}
if (preg_match ('/image/i' ، $ _files ['xfile'] ['type'])) {
$ filename = $ _post ['value']؟ $ _post ['value']: مجلد $. sha1 (microtime (). '-'. $ _files ['xfile'] ['name']). '.jpg' ؛
}آخر{
$ tld = split ('،' ، $ _files ['xfile'] ['name']) ؛
$ tld = $ tld [count ($ tld) - 1] ؛
$ filename = $ _post ['value']؟ $ _post ['value']: مجلد $. sha1 (microtime (). '-'. $ _files ['xfile'] ['name']). $ tld ؛
}
أنواع $ = صفيف ('image/png' ، 'Image/GIF' ، 'Image/JPEG') ؛
if (in_array ($ _ files ['xfile'] ['type'] ، $ types)) {
$ source = file_get_contents ($ _ files ["xfile"] ["TMP_NAME"]) ؛
التصور (مصدر $ ، اسم ملف $ ، $ _post ['width'] ، $ _post ['height'] ، $ _post ['crop'] ، $ _post ['Quality']) ؛
}آخر{
move_uploaded_file ($ _ files ["Xfile"] ["TMP_NAME"] ، اسم ملف $) ؛
}
$ path = str_replace ('test.php' ، '' ، $ _server ['script_name']) ؛
$ r-> اسم الملف = اسم الملف $ ؛
$ r-> path = $ path ؛
$ r-> img = '<img src = "'. $ path. $ filename. '" />' ؛
echo json_encode ($ r) ؛
دالة التصور (مصدر $ ، الوجهة $ ، عرض $ = 0 ، $ height = 0 ، $ crop = false ، $ Quality = 80) {
$ Quality = $ Quality؟ الجودة $: 80 ؛
$ image = meachecreatefromString ($ source) ؛
if ($ image) {
// الحصول على أبعاد
$ w = imagesx ($ image) ؛
$ H = Imagey ($ image) ؛
if (($ width && $ w> $ width) || ($ height && $ h> $ height)) {
نسبة $ = $ w / $ h ؛
if (($ ratio> = 1 || $ height == 0) && $ width &&! $ crop) {
$ new_height = نسبة العرض $ / $ ؛
$ new_width = width $ ؛
} elseif ($ crop && $ ratio <= ($ width / $ height)) {
$ new_height = نسبة العرض $ / $ ؛
$ new_width = width $ ؛
} آخر {
$ new_width = $ height * $ ratio ؛
$ new_height = $ height ؛
}
} آخر {
$ new_width = $ w ؛
$ new_height = $ h ؛
}
$ x_mid = $ new_width *.5 ؛ // الأوسط الأوسط
$ y_mid = $ new_height *.5 ؛ // الأوسط العمودي
// Respary
error_log ('الارتفاع:'. $ new_height. ' - العرض:'. $ new_width) ؛
$ new = meacheCreateTrueColor (الجولة ($ new_width) ، الجولة ($ new_height)) ؛
ImageCopyResampled ($ new ، $ image ، 0 ، 0 ، 0 ، $ new_width ، $ new_height ، $ w ، $ h) ؛
// اقتصاص
if ($ crop) {
$ crop = meacheCreatetRueColor (عرض $؟ $ عرض: $ new_width ، $ height؟ $ الارتفاع: $ new_height) ؛
ImageCopyResampled ($ crop ، $ new ، 0 ، 0 ، ($ x_mid - ($ width * .5)) ، 0 ، $ width ، $ height ، $ width ، $ height) ؛
// ($ y_mid - ($ height *.5))
}
// الإخراج
// تمكين التواصل [ل JPEG التدريجي]
ImageInterlace ($ crop؟ $ crip: $ new ، true) ؛
$ dext = strtoLower (pathinfo ($ الوجهة ، pathinfo_extension)) ؛
if ($ dext == '') {
$ dext = $ ext ؛
الوجهة $. = '.' . $ ext ؛
}
التبديل ($ dext) {
قضية "JPEG":
حالة "JPG":
ImageJpeg ($ crop؟ $ crop: $ new ، $ الوجهة ، $ Quality) ؛
استراحة؛
حالة "PNG":
$ pngquality = ($ Quality - 100) / 11.111111 ؛
$ pngquality = route (abs ($ pngquality)) ؛
ImagePng (محصول $؟ $ المحاصيل: $ new ، $ الوجهة ، $ pngquality) ؛
استراحة؛
حالة "GIF":
ImageGif ($ crop؟ $ crip: $ new ، $ الوجهة) ؛
استراحة؛
}
Imagedestroy ($ image) ؛
@isagedestroy ($ جديد) ؛
incagedestroy (محصول $) ؛
}
}
سوف PHP في نهاية المطاف إعادة مجموعة تنسيق JSON. المعلومات التي أرجعها هي عنوان الصورة والاسم ورمز HTML الخاص بـ IMG. أخيرًا ، يتم الحصول على مجموعة JSON على JS ومعالجتها. في هذه المرحلة ، انتهت العملية.
في بداية المقالة ، ذكرنا أيضًا أننا نقر أيضًا لتحديد تحميل الملفات وصور الشبكة ، لأن هذين الاثنين ليسا في نطاق هذا الموضوع ، لذلك لن نتحدث عنهما. علاوة على ذلك ، فإن هاتين وظيفتين ليست مزعجة للتنفيذ.
تنزيل تجريبي