ممارسة المشروع: نموذج تحميل الصورة أو ضغط الصورة الأمامية (ضغط الصورة الأمامي)

تم إطلاق المشروع الأول أخيرًا. إنها منصة للتمويل الجماعي للرعاية العامة تسمى Qinqingchou. تم الانتهاء من معظم واجهات WeChat و Computer and Backend. بعد بضعة أشهر ، أشعر أنني اكتسبت الكثير وأعتقد أنني بحاجة إلى تلخيصها.

أول ما يتبادر إلى الذهن هو مسألة تحميل الصور. عندما يتم تحميل بيانات النموذج عادةً بواسطة Ajax ، من الغباء استخدام أشكال النماذج لتحميل الصور. ثم في ذلك الوقت لم أفكر في استخدام البرنامج المساعد لـ jQuery Form.

يتمثل الحل الذي قدمه زميل في الخلفية في كتابة نموذج نموذج في iframe ، ثم تحميل الصورة وإرسال النموذج تلقائيًا. سوف يقفز إلى عنوان الصورة على الخادم إلى عنوان URL الخاص بالصفحة ، وسأقوم اعتراضه.

الحل 1: نموذج Iframe+نموذج

 <form action = "/user/uploadidcard.do" enctype = "multipart/form-data" method = "post"> <input type = "file" id = "eploadpic" name = "file"> <label for = "uploadpic" id = "filebtn">+<img src = "/> $ (".

قدم iframe في الواجهة حيث تحتاج الصورة إلى تحميلها ، واتصل طريقة iframe في المكتبة العامة ، والحصول على عنوان URL الخاص بالصورة وعرض الصورة في iframe

 . {filepath = place.match (/filepath =/s+/) [0] .substr (9) ؛} $ (el) .Contents (). بنجاح ') ؛ $ (el). contents (). find (". tip"). "206": $ (el) .Contents (). Find (". tip")

الحل 2: في وقت لاحق وجدت أن هناك مشكلتين في هذا النهج. أحدهما هو أن الصور التي أرسلها المستخدم كانت كبيرة جدًا وأن الخلفية لم تضغط عليها (كانت الزملاء في الخلفية مشغولة للغاية. من أجل استيعابها ، قمنا بضغطها على الواجهة الأمامية).

والثاني هو أنه بعد تحميل الصورة ، سيتم عرض الصورة على iframe ، والتي تتطلب وقت رد فعل معين. في بعض الأحيان ، سيبلغ المستخدم أنه لا يمكن تحميل الصورة ، ولكن في الواقع لم يتم إرجاع الخلفية بعد ...

لذلك قررت تحميله على الخلفية باستخدام BASE64

 <type type = "file" id = "uploadpic" name = "file"> <label for = "uploadpic" id = "filebtn">+<img src = ""/> </billy> <span> يرجى تحميل الصورة ، الحجم هو في 2M <br/> (يمكن أن يكون نوع الصورة jpg ، jepg ، png ، gif) 640*400 </span> <input type = "text" name = "turnurl"> <canvas id = "uploadimg" style = "display: none"> </tanvas>

الهيكل مشابه للهيكل الأصلي ، ولكن هناك قماش إضافي

 $ ("#uploadpic"). on ('change' ، function (event) {event.preventDefault () ؛ console.log ($ (this) [0] .files) ؛ var file = $ (this) [0] .files [0] (!/image /// w+/. test (file.type)) {Alert ("يجب أن يكون الملف صورة!") ؛ إرجاع false ؛} var reader = new fileReader () ؛ reader.readasdataurl (file) ؛ reader.onload = function (e) {createCanvas (this.result) ؛}}) document.getElementById ("eploadimg") ؛ var cxt = canvas.getContext ('2d') ؛ canvas.width = 640 ؛ canvas.height = 400 ؛ var img = new image () ؛ img.src = src ؛ img.onload = function () {var w = img.width ؛ canvas.width = w ؛ // canvas.height = h ؛ cxt.drawImage (img ، 0 ، 0،640،400) ؛ // cxt.drawimage (img ، 0 ، 0) ؛ $ (". "/front/uploadbybase64.do"،type:" post "، البيانات: {" imgstr ": canvas.todataurl (" Image/jpeg "، 0.9) .Split ('،') [1]} ، النجاح: الدالة (البيانات) {console.log (data) ؛ $ ( data.url) ؛}}) ؛}}

1. أولاً ، استخدم معلومات ملف الإدخال لتحديد ملف حجم الملف.

2. ثم استخدم واجهة FileReader لـ HTML5 للحصول على بيانات BASE64 لهذه الصورة.

3. تمرير هذا القاعدة 64 إلى قماش ويكون بمثابة SRC للصورة. في هذا الوقت ، يمكنك ضبط حجم الدقة للصورة للتأكد من أن الصور التي تم تحميلها لها دقة موحدة. بالطبع ، يمكن أن يعتمد أيضًا على الحجم الأصلي للصورة.

4. قبل Ajax ، عرض Base64 المعالجة مباشرة (بحيث يمكن للمستخدم على الفور رؤية الصورة المحمّلة) ، ثم تمرير Canvas.Todataurl ("Image/JPEG" ، 0.9) .SPLIT ('،') [1] (النوع هو صورة/JPEG ، يمكنك استخدام المعلمة الثانية لتعيين الصورة)

5. ثم اربط عنوان URL الذي يتم إرجاعه في الخلفية إلى خاصية البيانات-url للصورة ، واحصل على بيانات البيانات عند تقديم AJAX ، بحيث يمكن للمستخدم رؤيته بأسرع ما يمكن ، ويظل عنوان URL في الواقع في عملية AJAX إلى الخلفية.

PostScript: هناك مشكلة في كلا الحلين ، والتي ستحمل الكثير من الصور الزائدة إلى الخلفية. لكن يبدو أن الزملاء في الخلفية ليس لديهم أي اعتراض.

التأثير الفعلي مثل هذا http://www.qqchou.org/qqcweb/pages/photoiframe.html

ما سبق هو ممارسة المشروع ، نموذج تحميل الصور أو ضغط الصورة الأمامية (ضغط الصورة الأمامي) الذي قدمه المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!