Baru -baru ini, saya menulis situs web pribadi saya, kerangka bootstrap yang digunakan di ujung depan. Ketika saya mencapai fungsi pengunggahan gambar, saya menemukan plug-in input file unggahan berbasis bootstrap di internet. Plug-in ini sangat konsisten dengan tampilan estetika saya, jadi saya akan merekam secara singkat penggunaan plug-in ini.
Pertama, perkenalkan file plugin CSS dan JS sesuai dengan jalur proyek Anda
Perhatikan bahwa file bahasa lokal diperkenalkan setelah fileInput.min.js file
<!-File Input-> <link href = "../../ css/fileInput.min.css" rel = "stylesheet"> <script src = "../../ js/fileinput.min.js"> </script> <script src = "../../ js/zh.j.j.j.
Lalu ada kode HTML karena saya bukan front-end profesional sehingga kode front-end sangat buruk dan menyemprotkan dan memukul ringan
<!-- Modal Box (Modal) --> <span style="white-space:pre"> </span><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style = "White-Space: Pre"> </span> <div> <span style = "White-space: pre"> </span> <viv> <span style = "White-space: pre"> </span> <Div> <span style = "White-space: pre"> </span> <button type = "Tombol" Data-Dismiss = "modal" orial-hidden = "span-span" <"span" span "white" <"white" <"span" span "span" span "white" span "white-hid-hidden" style = "White-Space: Pre"> </span> </button> <span style = "White-space: pre"> </span> <h3 id = "mymodallabel" align = "center"> <span style = "white-space: pre"> </span> <b> tambahan skor musik </b> <span style = "span-space: pre"> </span> <b> Informasi skor musik </b> <span style = "span white-space: pre"> </span> </B> her </hy </b> <span style = "white space: pre" pre "> </span> </bentang> hang </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><form id="addForm" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span> <span> Score name</span> <span style = "White-Space: Pre"> </span> <span style = "White-space: pre"> </span> <input type = "text" id = "scorename" name = "scorename" placeholder = ""> <span style = "space putih: pre"> </span> </div> <span style = "space space: pre" </span "; <span style = "White-Space: Pre"> </span> <span style = "White-Space: Pre"> </span> <span> Tipe skor </span> <span style = "White-space: pre"> </span> <span style = "span-space: pra"> </span> <span = "pre-space: pre"> </span> <span l-span = "span = span = span = span =" pra "pre" </span> <span = "span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span = span/span/span/span/span/span/span/span/span/span/span/span/span/span </span> <span style = "space putih: pre"> </span> <span style = "space putih: pre"> </span> </div> <span style = "space putih: pre"> </span> <span style = "White-space: pre"> </span> <span style = "white-space: pre"> </span> </span-t shower: in-t-space: in-t: pre-t: pre-t; 90px; "> <span style =" White-space: pre "> </span> <span style =" space putih: pre "> </span> <span style =" space putih: pre "> </span> <span style =" white-space: pre "> </span> <input type =" text "id =" kesulitan "name =" SUSTER "> </span> <input =" TEXT "ID =" TURSI "NAME =" SUSTER "> <span" white "pre" pre "pre" pre "pre" name = "SUSTER"> <Span "<span" pre "pre" pre "pre" sudy "name =" SUSTER "> </span> <input =" TEXT "ID =" TURSI "NAME =" SURSOD "> <span" SPANE style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div style="margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="tune" name="tune"> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span><input id="fileup" type="file"/> <span style="white-space:pre"> </span> </div> <span style = "space putih: pre"> </span> </form> <span style = "space putih: pre"> </span> </div> <span style = "space putih: pre"> </span> </div> <span style = "pre-space: pre"> </span> <Div SPAN style = "span white =" Span = "Pre"> </san> <Div SPAN> "Span =" Span = "Span" </span "> </span> <pan>" Span = "Span =" Span = "Span" </span> </span> </span "<span =" data-dismiss="modal">Close<span style="white-space:pre"> </span></button> <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span><!-- <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span></div><!-- /.modal-content-> <span style = "White-space: pre"> </span> </div> <!-/.modal-> <span style = "space putih: pre"> </span> </div>
Kemudian kode JS menginisialisasi input file
// inisialisasi fungsi control fileInput (inisialisasi pertama) initfileInput (ctrlname, unggah) {var control = $ ('#' + ctrlname); control.fileinput({ language: 'zh', //Set the language uploadUrl: uploadUrl, //Uploaded address allowedFileExtensions: ['jpg', 'png','gif'],//Received file suffix showUpload: true, //Does the upload button showCaption: false, //Does the title browser browserClass: "btn btn-primary", // Tombol Previewfileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>", unggah: false, uploadextradata: function (previewid, index) {var obj = {} $ ('#addForm'). Find ('input'). Masing-masing). $ (ini) .val (); } // inisialisasi fileInput initfileInput ("fileup", http: // localhost: 8080/web/guita/addguitainfo.action);Kode ini adalah inti dari plugin
Unggahurl adalah jalur akses yang diberikan oleh latar belakang
Ini adalah paragraf khusus di sini
uPloadextradata: function (previewid, index) {var obj = {}; $ ('#addForm'). find ('input'). masing -masing (fungsi () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); kembalikan obj; }Kode ini Uploadextradata cocok untuk melewati parameter tambahan yang dapat digunakan untuk mengirimkan formulir formulir untuk data kotak input lainnya.
Uploadextradata: {type: "type", tune: "tune"}Secara umum, data statis dapat diterima secara langsung seperti yang ditunjukkan pada gambar di atas. Namun, jika Anda menulisnya seperti ini, Anda tidak akan mendapatkan data dinamis. Data hanya akan dihasilkan sekali selama inisialisasi dan tidak akan berubah.
Saya telah bingung tentang masalah ini untuk banyak waktu. Akhirnya, saya membaca diskusi tentang teman -teman asing di Git dan kemudian merujuk ke API untuk menyelesaikannya.
Setelah menulis ini, Anda dapat melihat rendering
Gayanya masih sangat bagus. Klik untuk mengunggahnya dan seluruh data dari akan dikirimkan ke latar belakang.
Banyak aplikasi plug-in yang saya temukan online terintegrasi dengan PHP. Saya menulisnya di Java. Di sini saya juga pergi ke kode yang diterima di latar belakang. Kerangka kerja SpringMVC sangat nyaman untuk menerima data.
Dengan cara ini, parameter data dan parameter gambar dilewatkan, dan latar belakang memanggil kode yang diunggah oleh file untuk menyimpan gambar
Ada banyak penggunaan yang layak dipelajari untuk plug-in ini. Di sini saya hanya berbicara secara singkat tentang cara menggunakannya dan menyelesaikan transmisi data dinamis. Teman-teman yang baru saja bersentuhan dengan plug-in ini dapat membuat referensi singkat.
Saya telah memperkenalkan banyak tentang metode Bootstrap untuk mengunggah gambar menggunakan plug-in file-input. Saya harap ini akan membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas Anda tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!