في الآونة الأخيرة ، أكتب موقع الويب الخاص بي الشخصي ، إطار Bootstrap المستخدم في الواجهة الأمامية. عندما حققت وظيفة التحميل للصور ، وجدت مكونًا إضافيًا لملف إطار عمل تحميل الصور المستند إلى bootstrap على الإنترنت. يتوافق هذا المكون الإضافي بشكل كبير مع عرضي الجمالي ، لذلك سأسجل بإيجاز استخدام هذا المكون الإضافي.
أولاً ، قدم ملفات CSS و JS بالمكونات الإضافية وفقًا لمسار المشروع الخاص بك
لاحظ أنه يتم تقديم ملفات اللغة المحلية بعد ملف fileInput.min.js
<!-إدخال الملف-> <link href = "../../ css/fileInput.min.css" rel = "STYLESHEET"> <script src = "../../ js/fileinput.min.js"> </script> <script src = "../../ js/zh.js
ثم هناك رمز HTML لأنني لست واجهة أمامية احترافية ، لذا فإن رمز الواجهة الأمامية سيئ للغاية ويضرب قليلاً ويضرب
<!-مربع مشروط (Modal)-> <span style = "White-Space: pre"> </span> <div id = "mymodal" tabindex = "-1" robe = "dialog" aria-labelledby = "mymodallabel" aria-hidden = "true" style = "White-Space: Pre"> </span> <viv> <span style = "White-Space: Pre"> </span> <viv> <span style = "White-Space: pre"> </span> <viv> <span Style = "White-Space: pre"> </span> <button type = "button" data- dismiss = style = "White-Space: pre"> </span> </ button> <span style = "White-Space: pre"> </span> <h3 id = "mymodallabel" align = "center"> <span style = "white-space: pre"> </p> <b> تمت إضافة معلومات درجة الموسيقى </b> <span style = "white-space: pre" </span> </viv> <span style = "White-Space: Pre"> </span> <viv> <span style = "White-Space: Pre"> </span> <form id = "addform" rol end = "form" style = "white-space: pre"> </span> <span style = "White-Space: pre"> </span> <input type = "text" id = "scorename" name = "scorename" leactholder = "" " 10px ؛ "> <span style =" White-Space: pre "> </span> <span style =" White-Space: pre "> </span> <span> نوع النتيجة </span> <span style =" white-space: pre "> </span> <span style =" white-space: pre "> </span space =" white-space: pre "</span> style = "White-Space: Pre"> </span> <span style = "White-Space: Pre"> </span> <span style = "White-Space: Pre" </span> </viv> <span style = "white-Space: pre"> </span> <span style = "White-Space: pre"> 10px ؛ margin-left: 90px ؛ "> <span style =" White-Space: pre "> </span> <span style =" White-Space: pre "> </span> <span style =" white-space: pre "> </span> <span style =" white-space: pre "> </span type = <span style = "white-space: pre"> </span> </viv> <span style = "White-Space: pre"> </span> <div style = "margin-top: 10px ؛"> <span style = "white-space: pre"> </span> <span style = "white-Space: pre"> span> style = "White-Space: Pre"> </span> <input type = "text" id = "tune" name = "tune"> <span style = "white-space: pre"> </span> </viv> <span style = "white-space: pre"> </span> </viv> <span style = "White-Space: pre"> </span> </form> <span style = "White-Space: pre"> </span> </viv> <span style = "white-Space: pre"> </span> </div> <span style = "white-space: pre"> </span> <span style = "white-space: pre" Data-Dismiss = "Modal"> Close <span style = "White-Space: Pre"> </span> </utton> <span style = "White-Space: Pre"> /.
ثم يقوم رمز JS بتهيئة مدخلات الملف
// تهيئة وظيفة التحكم في FileInput (التهيئة الأولى) initFileInput (ctrlname ، uploadurl) {var control = $ ('#' + ctrlname) ؛ control.fileInput ({language: 'zh' ، // قم بتعيين تحميل اللغة: exploadurl ، // addring addressefileStensions: ['jpg' ، 'png' ، 'gif'] ، // Button Style PreviewFileicon: "<i class = 'glyphicon glyphicon-king'> </i>" ، exploadasync: false ، uploadextradata: function (perequiD ، index) {var obj = {} ؛ $ (هذا) .val () ؛ } // تهيئة FileInput initFileInput ("fileup" ، http: // localhost: 8080/web/guita/addguitainfo.action) ؛هذا الرمز هو جوهر البرنامج المساعد
التحميل هو مسار الوصول المقدم من الخلفية
هذه فقرة خاصة هنا
uploadextradata: function (معاينة ، فهرس) {var obj = {} ؛ $ ('#addform'). find ('input'). كل (function () {var id = $ (this) .attr ('id') ، val = $ (this) .val () ؛ obj [id] = val ؛}) ؛ إرجاع OBJ ؛ }هذا الرمز uploadextradata مناسب لتمرير معلمات إضافية يمكن استخدامها لإرسال نماذج النماذج لبيانات مربع الإدخال الأخرى.
uploadextradata: {type: "type" ، Tune: "Tune"}بشكل عام ، يمكن استلام البيانات الثابتة مباشرة كما هو موضح في الشكل أعلاه. ومع ذلك ، إذا كتبته مثل هذا ، فلن تحصل على بيانات ديناميكية. لن يتم إنشاء البيانات إلا مرة واحدة أثناء التهيئة ولن تتغير.
لقد كنت مرتبكًا بشأن هذه المشكلة منذ الكثير من الوقت. أخيرًا ، قرأت مناقشات الأصدقاء الأجانب على GIT ثم أشرت إلى واجهة برمجة التطبيقات لحلها.
بعد كتابة هذه ، يمكنك رؤية العروض
الأسلوب لا يزال جيدا جدا. انقر لتحميله وسيتم إرسال البيانات بأكملها من الخلفية.
العديد من تطبيقات المكونات التي وجدتها عبر الإنترنت مدمجة مع PHP. لقد كتبت في جافا. هنا ذهبت أيضًا إلى الكود المستلم في الخلفية. يعد Framework SpringMVC مناسبًا جدًا لتلقي البيانات.
وبهذه الطريقة ، يتم تمرير معلمات البيانات ومعلمات الصورة من خلالها ، والخلفية تستدعي الرمز الذي تم تحميله بواسطة الملف لحفظ الصورة
هناك العديد من الاستخدامات التي تستحق الدراسة لهذا المكون الإضافي. أنا هنا أتحدث باختصار عن كيفية استخدامه وإكمال نقل البيانات الديناميكية. يمكن للأصدقاء الذين اتصلوا للتو بهذا المكون الإضافي أن يقوموا مرجعًا موجزًا.
لقد قدمت الكثير عن طريقة bootstrap لتحميل الصور باستخدام المكون الإضافي مدخلات الملف. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!