مقدمة في تحميل الويب
WebUploader هو مكون بسيط لتحميل الملفات الحديثة بشكل رئيسي HTML5 ويستكمل بواسطة Flash تم تطويره بواسطة فريق Baidu Webfe (FEX). في المتصفحات الحديثة ، يمكننا أن نلعب بشكل كامل مزايا HTML5 ، مع عدم التخلي عن متصفحات IE السائدة ، والاستمرار في استخدام وقت تشغيل الفلاش الأصلي ، وتوافق مع IE6+، iOS 6+ ، Android 4+. مجموعتان من وقت التشغيل ، يمكن تحديد طريقة الاتصال نفسها من قبل المستخدمين في الإرادة. إن استخدام تجزئة الملفات الكبيرة المتزامنة يعمل بشكل كبير على تحسين كفاءة تحميل الملفات.
هنا نستخدم مثالًا من الموقع الرسمي لتحميل الصورة الرمزية الشخصية الخاصة بنا.
ينصب تركيزنا على كيفية تحميل الملفات باستخدام WebUploader في Spring Boot Project ، حتى نتمكن من تنفيذ وظيفة بسيطة للرجوع إليها مباشرة فقط.
فيما يلي مثال تم تنزيله من الموقع الرسمي: وظيفة تحميل الصور مع المحاصيل.
نستخدم أمثلة لإعادة تشكيل تحميلات الصورة الرمزية في المشروع.
يبدو التأثير هكذا:
أولاً ، دعنا نعيد تشكيل رمز عينة WebUploader الخاص بنا.
فيما يلي بعض الرموز في مشروعي:
(Function (Factory) {if (! window.jquery) {Alert ('jQuery مطلوب.')} jQuery (function () {factory.call (null ، jQuery) ؛}) ؛}) (function ($) {// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- خطأ ("webuploader لا يدعم المتصفح الذي تستخدمه. ') ؛ _.deferred () ؛ }) ؛ file.trigger (divinal '، size ، size) ؛ ) ؛ لاستخدام وضع المحاصيل. $ .trim ($ ("#base_url"). val ()) + '/static/webuploader/uploader.swf' ، fileNumlimit: 1 ، // فقط ملفات الصور مسموح بها: "jpg ، jpeg ، png '، // solve webuploader chrome انقر فوق مربع تحديد ملف التحميل لتأخير بضع ثوان قبل أن تكون الاستجابة بطيئة من المحاكاة:" Image/JPG ، Image/JPEG ، Image/png' // تعديل هذا السطر} // formdata: // chunked: true ، // shash // chunksize: 10 * 1024 * 1024 ، }}) ؛ }) ؛ "التحميل" ، وظيفة (ملف) {showInfo ( file._info.width ؛ --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- var btn = $ ('. Upload-BTN') ؛ var isBase64Supported ، رد الاتصال ؛ $ image.cropper ({sideRatio: 4/4 ، معاينة: ".IMG-preview" ، تم: الدالة (البيانات) {// console.log (data) ؛}}) ؛ وظيفة SRCWRAP (SRC ، CB) {// نحتاج إلى التحقق من ذلك في المرة الأولى. إذا (typeof isBase64Supported === 'undefined') {(function () {var data = new image () ؛ var support = true ؛ data.onload = data.onerror = function () {if (this.width! = 1 || this.height! = 1) {support ؛ false ؛ }) () ؛ } if (isBase64Supported) {cb (src) ؛ } آخر {// وإلا نحتاج إلى دعم الخادم. // تحويل base64 إلى ملف. // $ .ajax ('' ، {// method: 'post' ، // data: src ، // datatype: 'json' //}). تم القيام به (وظيفة (استجابة) {// if (response.result) {// cb (response.result) ؛ //} else {// alert ("prefiew") ؛ }} btn.on ('click' ، function () {callback && callback ($ image.cropper ("getData") ؛ return false ؛}) ؛ return {setSource: function (src) {// handle base64 غير مدعوم. يحدث // عمومًا في IE6-IE8 SRCWRAP (SRC ، الوظيفة (SRC) {$ image.cropper ("setImgSrc" ، src) ؛}) ؛ container.removeclass ('webuploader-element-invisible') ؛ إرجاع هذا ؛ } ، getImagesize: function () {var img = $ image.get (0) ؛ return {width: img.naturalWidth ، الارتفاع: img.naturalheight}} ، setCallback: function (cb) {callback = cb ؛ إرجاع هذا ؛ } ، disable: function () {$ image.cropper ("disable") ؛ إرجاع هذا ؛ } ، enable: function () {$ image.cropper ("enable") ؛ إرجاع هذا ؛ }}}}}) () ؛ // -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- تحميل. crop (البيانات) ؛ تحميل. upload () ؛ }) ؛ }) ؛ // --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------هناك أيضًا بعض الرموز للصفحة:
فيما يلي رمز جزء وحدة التحكم:
requestMapping (value = "/studentimgfileUpload" ، method = requestMethod.post) reSponsebody String studentImgFileUpload (requestparam multipartfile file ، httpservledrequest) logger.info ("تحميل اسم ملف:" + OriginalFilename) String allPath = request.getServletContext (). الملفات randomaccessfile rafile = null bufferedInputStream inputStream = null try {file dirfile = new file (realPath ، eploadFiLename) byte [] buf = new byte [1024] int length = 0 بينما ((طول = inputStream.Read (buf))! = -1) {rafile.write (buf ، 0 ، طول)}} catch (استثناء e) {flag = false logger.info ( (inputStream! = null) {inputStream.close ()} if (rafile! = null) {rafile.close ()}} catch (استثناء e) {flag = false logger.info ("خطأ التحميل:".هذا ببساطة ينفذ وظيفة استخدام WebUploader لتحميل الملفات في Spring Boot Project.
لخص
ما سبق هو حذاء الربيع الذي قدمه لك المحرر. يستخدم WebUploader لتحميل الملفات. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!