Input file plug-in unggahan file bootstrap adalah kontrol unggahan file yang baik, tetapi tidak ada banyak kasus dalam pencarian dan penggunaan. Saat menggunakannya, Anda juga menyeberangi sungai dengan menyentuh batu langkah demi langkah. Kontrol ini disajikan pada antarmuka, dan unggah yang saya gunakan sebelumnya lebih indah dan memiliki fungsi yang lebih kuat. Artikel ini terutama didasarkan pada kasus kode kerangka kerja saya sendiri, memperkenalkan penggunaan input file, plug-in unggahan file.
1. Pengantar Input File untuk Plugin Unggah File
Alamat beranda plug-in ini adalah: http://plugins.krajee.com/file-putput. Anda dapat melihat banyak tampilan kode demo dari sini: http://plugins.krajee.com/file-basic-usage-demo.
Ini adalah kontrol input file HTML5 yang ditingkatkan, ekstensi bootstrap 3.x, mengimplementasikan pratinjau pengunggahan file, unggahan multi-file dan fungsi lainnya.
Secara umum, kita perlu memperkenalkan dua file berikut untuk plug-in yang akan digunakan secara normal:
Bootstrap-FileInput/CSS/FileInput.min.css
Bootstrap-FileInput/JS/FileInput.min.js
Efek antarmuka yang sederhana adalah sebagai berikut. Seperti banyak kontrol file unggahan, ia dapat menerima berbagai jenis file. Tentu saja, kami juga dapat menentukan jenis file tertentu dan fungsi lain yang diterima.
Jika budaya Cina perlu dipertimbangkan, maka dokumen perlu diperkenalkan:
Bootstrap-FileInput/JS/FileInput_locale_zh.js
Dengan cara ini, berdasarkan koleksi Bundles MVC, kami dapat menambahkan file yang mereka butuhkan ke koleksi.
// Tambahkan dukungan untuk Bootstrap-FileInput Control css_meteronic.include ("~/content/myplugins/bootstrap-fileInput/css/fileInput.min.css"); js_meteronic.include ("~/content/myplugins/bootstrap-fileInput/js/fileInput.min.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileInput/js/fileInput_locale_zh.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fileInput/js/fileInput_locale_zh.js");Dengan cara ini, kita dapat menyajikan deskripsi antarmuka Cina dan meminta pada halaman, seperti yang ditunjukkan pada antarmuka berikut.
2. Penggunaan input file untuk unggahan file
Secara umum, kita dapat mendefinisikan fungsi JS umum untuk menginisialisasi kontrol plug-in ini, seperti yang ditunjukkan pada kode fungsi JS berikut.
// inisialisasi fungsi control fileInput (inisialisasi pertama) initfileInput (ctrlname, unggah) {var control = $ ('#' + ctrlname); control.fileInput ({bahasa: 'zh', // atur bahasa unggahan bahasa: unggah, // alamat diunggah diizinkanfilextensions: ['jpg', 'png', 'gif'], // file sufiks yang ditampilkan: false, // melakukan tombol unggahan showcaption: false, // false, // false-title-browser: false-browser; // Tombol Gaya PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>",});}Dalam kode halaman, kami menempatkan kontrol unggahan file, seperti yang ditunjukkan pada kode berikut.
<Div style = "Tinggi: 500px"> <input id = "file-portrait1" type = "file"> </div>
Dengan cara ini, kode inisialisasi kode skrip kami adalah sebagai berikut:
// Inisialisasi Kontrol FileInput (Inisialisasi Pertama) InitFileInput ("File-Portrait", "/User/EditporTrait");Ini melengkapi inisialisasi kontrol. Jika kita perlu mengunggah file, maka kita juga memerlukan kode JS untuk menangani acara yang diunggah oleh klien, dan juga memerlukan pengontrol latar belakang MVC untuk menangani operasi penghematan file.
Misalnya, kode saya untuk menyimpan data formulir adalah sebagai berikut.
// Tambahkan rekaman formvalidate ("ffadd", function (form) {$ ("#add"). Modal ("hide"); // kirim parameter konstruk ke latar belakang var postdata = $ ("#ffadd"). SerializeArray (); $ .post (url, postdata, function (json) (json) (varsc =pare; post (url, postdata, function (json) {varsc =parpept (URL, postdata, function (json) (json) (varsc = post (url, postdata, function (json) (json) {post; {// Tambahkan Potret Pemrosesan InitporTrait (Data.Data1); }}). ERROR (function () {showTips ("Anda tidak berwenang menggunakan fungsi ini, silakan hubungi administrator untuk menanganinya.");}); });Di antara mereka, kami memperhatikan bagian kode logika pemrosesan dari hemat file:
// Tambahkan pemrosesan unggahan dari potret initportrait (data.data1); // Gunakan ID tertulis untuk memperbarui $ ('#file-portrait'). FileInput ('unggah');Baris kode pertama adalah membangun kembali konten tambahan yang diunggah, seperti informasi ID pengguna, sehingga kami dapat membangun beberapa data tambahan berdasarkan ID ini untuk mengunggah dan pemrosesan untuk latar belakang.
Fungsi ini terutama menugaskan kembali ID untuk memfasilitasi akuisisi parameter tambahan terbaru saat mengunggah. Ini sama dengan mode pemrosesan unggah.
// inisialisasi fungsi informasi gambar initportrait (ctrlname, id) {var control = $ ('#' + ctrlname); var imageUrl = '/picturealbum/getportrait? id =' + id + '& r =' + math.random (); // Penting, perlu memperbarui konten parameter tambahan dari kontrol, dan inisialisasi gambar control.fileInput ('refresh', {uPloadextradata: {id: id}, inisiurpreview: [// pratinjau gambar "picture" <img src = '" + imageurl +" class =' file-preview-preveview-preveView "<mg src = '" + Imageurl + "' class = 'file-preview-preview-preveView-preveView" }); }Seperti yang kita lihat sebelumnya, alamat yang saya unggah adalah: "/user/editportrait". Saya juga akan mengumumkan fungsi latar belakang ini, berharap untuk memberi Anda kode kasus lengkap untuk dipelajari.
/// <summary> /// unggah gambar avatar pengguna /// </summary> /// <param name = "id"> ID pengguna </param> /// <returns> </eturns> editerResult publik editportrait (int id) {CommonResult hasil = new CommonResult (); coba {var file = request.files; if (file! = null && file.count> 0) {userInfo info = bllfactory <user> .instance.findbyId (id); if (info! = null) {var filedata = readfilebytes (file [0]); result.success = bllfactory <User> .instance.updatePersonimageBytes (userimageType.Personportrait, id, filedata); }}} catch (exception ex) {result.errormessage = ex.message; } return toJSonContent (hasil); }Dengan cara ini, kami telah membangun logika penghematan dan pemrosesan potret pengguna di atas, dan file dapat disimpan secara normal ke sistem file latar belakang, dan pada saat yang sama, beberapa informasi yang diperlukan dicatat dalam database.
Tentu saja, selain menggunakannya untuk memproses gambar potret pengguna, kami juga dapat menggunakannya untuk membangun operasi pemrosesan album gambar. Antarmuka spesifik adalah sebagai berikut.
Kode inisialisasi untuk bagian ini adalah sebagai berikut:
// Inisialisasi Kontrol FileInput (Inisialisasi Pertama) $ ('#File-Portrait'). FileInput ({bahasa: 'zh', // Setel bahasa unggahan bahasa: "/fileupload/unggah", // unggah alamat yang diizinkan. 'Multipart/Form-Data', Showupload: True, // Apakah tombol Upload ShowCaption: False, // Apakah Browser BrowserClass Judul: "BTN BTN-Primary", // Tombol PreviewFileicon: "<i class = 'Glyphicon glyphicon-king'> </i>, msg load", msg: msg: msg: msg load load: "i class = 'msgeo load load load load load load: ({n}) melebihi nilai maksimum yang diizinkan {m}! ",});Di atas adalah penjelasan terperinci tentang pengalaman kerangka pengembangan metronik bootstrap yang diperkenalkan oleh editor kepada Anda [lima] penggunaan plug-in input file input file bootstrap dijelaskan secara rinci. Saya harap ini akan membantu semua orang. Jika Anda ingin mengetahui informasi lebih lanjut, harap perhatikan situs web Wulin.com!