غالبًا ما تحتاج المنتديات أو القضبان إلى مشاركة الكثير من الصور. تتمثل الطريقة السيئة لتحميل الصور في تحميلها على الخادم المركزي ، ثم إعادة توجيهها إلى خادم الصور الثابت. تقدم هذه المقالة كيفية استخدام plupload لتحسين عملية التحميل وتجاوز الخادم لتحميل الصور مباشرة على دفعات إلى Youpai Cloud. سيتحدث هذه المقالة عن النقاط الرئيسية التالية:
نسخة الكود كما يلي:
مكتبة plupload
الضغط المحلي للصور
صور اختيار متعددة
تجاوز الخادم وتحميل الصور مباشرة إلى Youpaiyun
باستخدام واجهة برمجة تطبيقات نموذج HTTP
تكوين plupload
مكتبة plupload
Plupload هو مكون إضافي لتحميل الصور الغني للغاية. يمكن أن تدعم المتصفحات ذات النسخة المنخفضة التحميلات من خلال الفلاش/Silverlight/HTML4 ، بينما في المتصفحات ذات النسخة العليا ، سيتم منحها الأولوية للتحميل باستخدام واجهة HTML5. كل هذا تلقائي ، ويمكن القول أنه مناسب للغاية للاستخدام! ثانياً ، يدعم plupload أيضًا وظائف مثل ضغط الصور على العميل وتحميلها مباشرة على السحب والإفلات. للحصول على التفاصيل ، يمكنك الذهاب إلى موقعها الرسمي لمعرفة المزيد من المعلومات.
هنا نستخدم فقط واجهة برمجة التطبيقات الأساسية ، فقط تقديم ملف.
نسخة الكود كما يلي:
<script src = "lib/plupload -2.1.2/js/plupload.full.min.js"> </script>
أمثلة API الأساسية التي قدمها المسؤول بسيطة للغاية ، يمكنك عرضها مباشرة على http://www.plupload.com/examples/core. لا توجد صعوبات في فهم واجهة برمجة التطبيقات الأساسية. إذا كنت بحاجة إلى مساعدة ، فيمكنك أن تسألني سؤالًا لاحقًا في هذه المقالة.
الضغط المحلي للصور
بشكل عام ، فإن جودة الصور التي تتصفحها على صفحات الويب ليست عالية. أتذكر أنه عندما كنت أدرس PS في المدرسة الثانوية ، قال المعلم إن قرار الصور عبر الإنترنت سيكون 72 ، ويجب أن تكون الصور المطبوعة 300. لذلك ، عندما يقوم المستخدمون بتحميل صورة كبيرة ، من الأفضل استخدامها لضغط الصورة محليًا على عميل المستخدم وتحميل الصورة الأصغر المضغوطة ، والتي لن تؤثر على تأثير المتصفح ، ولكن أيضًا سرعة التحميل على التحديث.
يتم دعم وظيفة الضغط المحلي للصورة في plupload ، ما عليك سوى تمرير معلمة تغيير حجمها عند تهيئتها. من بينها ، يمكن ضبط العرض والارتفاع وفقًا للوضع الفعلي ، والجودة معلمة مهمة نسبيًا. كما يوحي الاسم ، كلما تم تعيين القيمة الأصغر ، كلما كانت الصورة أصغر ، ولكن كلما كانت جودة العرض أسوأ. تحتاج إلى وزن هذا بنفسك.
نسخة الكود كما يلي:
{
"تغيير الحجم": {
"العرض": 200 ،
"الارتفاع": 200 ،
"الجودة": 70
}
}
صور اختيار متعددة
أحد المتطلبات المسبقة لتحميل الصور هو القدرة على تحديد صور متعددة. الملفات المتعددة الاختيارية هي ميزة قياسية لـ HTML5. يمكننا تمكين الوضع المتعدد في الطرق التالية:
نسخة الكود كما يلي:
<form action = "xxx">
حدد الصور: <input type = "file" name = "img" multip> <!- متعددة هو المفتاح هنا! ->
<نوع الإدخال = "إرسال">
</form>
وفقًا للقسم ، تم اختيار العديد من تحديد الملفات في دعم المتصفح لـ JQuery-File-Upload ، فقد تطورت IE حتى IE10 أنه قد بدأت للتو في دعم ميزات HTML5 ، لذلك يتعين علينا استخدام الطاقة السحرية لـ Flash لدعم الصور المتعددة لمتصفحات الإصدار السفلي. لحسن الحظ ، ساعدنا plupload على القيام بذلك ، ويتم تشغيل هذا المفتاح افتراضيًا. إذا كنت تعتقد أنك لا تحتاج إلى استخدام صور متعددة الاختيار ، فيمكنك تعيين multi_selection: false لإيقاف هذه الميزة.
تجاوز الخادم وتحميل الصور مباشرة إلى Youpaiyun
يوفر YouPaiyun واجهة برمجة تطبيقات نموذج HTTP. من خلال هذه الواجهة ، يمكننا بدء طلب مباشرة لتحميل الصور من المتصفح دون الحاجة إلى النقل من خلال الخادم الخاص بنا ، مما يقلل بشكل كبير من النفقات العامة.
باستخدام واجهة برمجة تطبيقات نموذج HTTP
باستخدام هذه الواجهة ، تحتاج إلى إرسال نموذج إلى Youpaiyun. يحتوي هذا النموذج على الملف الذي تريد تحميله ، ويحتاج أيضًا إلى تضمين السياسة والتوقيع. يتم استخدام السياسة لنقل المعلمات المتعلقة بطلبات التحميل ، مثل حفظ المسار ، ونوع الملف ، ونتائج المعالجة المسبقة ، وما إلى ذلك ، ويتضمن أيضًا وقت منحة طلب التحميل ، وما إلى ذلك. يتم استخدام التوقيع للتحقق من الأمان.
للراحة التوضيحية ، نستخدم JavaScript مباشرة لإنشاء السياسة والتوقيع هنا. ولكن في الاستخدام الفعلي ، لأسباب أمنية ، يرجى إكمال هذه العملية على جانب الخادم. تم تعديل الرمز التالي بناءً على العرض التوضيحي الرسمي ، وذلك بشكل أساسي باستخدام حساب الاختبار الرسمي. للحصول على طريقة توليد محددة لهاتين المعلمتين ، يرجى الرجوع إلى المستند الرسمي: http://docs.upyun.com/api/form_api/.
نسخة الكود كما يلي:
خيارات var = {
"دلو": "مظاهرة" ،
'Save-Key': '/test/filename.txt' ،
"انتهاء الصلاحية": Math.Floor (New Date (). GetTime () / 1000) + 86400
} ؛
// انظر المزيد من المعلمات: http://docs.upyun.com/api/form_api/#form مقدمة واجهة API
var policy = window.btoa (json.stringify (Options)) ؛
// احصل
var form_api_secret = '1+jy2zqd5uvfw6hq8eesyqo50wo =' ؛
// حساب التوقيع
var signature = md5 (policy + '&' + form_api_secret) ؛
تكوين plupload
كيفية جعل plupload تعمل مع واجهة برمجة تطبيقات HTTP Form الخاصة بـ YouPaiyun ، أعطاني حقًا صداعًا. في الوثيقة التي تشاهد plupload ، جعلني الاكتشاف غير المتوقع رؤية الفجر. اجتذبني تحميل الارتباط إلى Amazon S3. الاسم الكامل لـ Amazon S3 هو خدمة التخزين البسيطة لـ Amazon ، وخدمات التخزين السحابية التي توفرها تشبه إلى حد ما تلك الموجودة في YouPaiyun.
بناءً على مقدمة تكوين المتصفح في هذه المقالة ، اكتشفت التكوين المطلوب لتحميله على youpaiyun. في الواقع ، من السهل جدًا القول ، بشكل أساسي تكوين اثنين عناوين URL و multipart_param. يتم استخدام الخيارات.
نسخة الكود كما يلي:
var uploader = new plupload.uploader ({
...
url: 'http://v0.api.upyun.com/' + Options.bucket ،
multipart_params: {
'filename': '$ {filename}' ، // إضافة هذا للحفاظ على الاتساق عبر أوقات التشغيل
"نوع المحتوى": '' ،
"السياسة": السياسة ،
"التوقيع": التوقيع ،
} ،
...
}) ؛
لخص
وبهذه الطريقة ، أدركنا أخيرًا أنه تجاوز الخادم من خلال التحميل وتحميل الصور على دفعات إلى Youpaiyun. Plupload هي في الحقيقة مكتبة قوية للغاية ، ولكن يمكن فرضها على الاستخدام التجاري. يرجى الذهاب إلى موقعها الرسمي لمعرفة المزيد!
أليس هذا بسيط جدا؟ الشيء الرئيسي هو أن الفكرة جيدة جدًا وتستحق التعلم. إذا كان لديك أي أسئلة ، فالرجاء ترك رسالة لي وسيحقق الجميع تقدمًا معًا