Saya telah terhindar baru -baru ini. Saya telah merangkum beberapa penggunaan umum komponen Bootstrap FileInput. Saya akan membaginya dengan platform Wulin Network untuk referensi Anda, dan juga nyaman untuk pencarian di masa mendatang. Mohon maafkan saya atas penulisan yang buruk dari artikel ini.
1. Tampilan Efek
1. Jenis input asli = 'file' sangat tak tertahankan untuk melihatnya.
2. Bootstrap FileInput tanpa dekorasi: (Evolusi Primer FileInput Bootstrap)
3. Evolusi Lanjutan FileInput Bootstrap: Budaya Cina, Upload Seret-dan-Drop, Verifikasi Ekstensi File (jika file tidak diperlukan, itu tidak akan diunggah)
Seret dan lepas unggah
Mengunggah
4. Bootstrap FileInput Ultimate Evolution: Memungkinkan beberapa file diunggah secara bersamaan dengan beberapa utas.
Mengunggah
Setelah unggahan selesai
2. Contoh kode
Bagaimana dengan itu? Seberapa efektif? Jangan khawatir, kami akan mencapai hasil di atas langkah demi langkah.
1. Halaman Cshtml
Pertama, perkenalkan file JS dan CSS yang diperlukan.
// bootstrap FileInputBundles.Add (new ScriptBundle ("~/Content/Bootstrap-FileInput/JS"). Sertakan ("~/Content/Bootstrap-FileInput/JS/FileInput.min.js", "~/Content/Bootstrap-FileInput/JS/FileInput_z StyleBundle("~/Content/bootstrap-fileinput/css").Include("~/Content/bootstrap-fileinput/css/fileinput.min.css"));@Scripts.Render("~/Content/bootstrap-fileinput/js")@Styles.Render("~/Content/bootstrap-fileinput/css")Kemudian tentukan tag input type = 'file'
<form><div id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div role="document"><div><div><button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 id="myModalLabel">Please select Excel file</h4></div><div><a href="~/Data/ExcelTemplate/Order.xlsx" style="border:none;">Download import template</a><input type="file" name="txt_file" id="txt_file" multiple /> </div> </div> </div> </div> </form>
Fokus pada kalimat ini:
<input type = "file" name = "txt_file" id = "txt_file" multipel />
Beberapa berarti bahwa beberapa file diizinkan untuk diunggah secara bersamaan, dan class = "File-Loading" berarti gaya tag.
2. Inisialisasi JS
$ (function () {// 0. Inisialisasi fileInputVar ofileInput = FileInput baru (); OfileInput.Init ("txt_file", "/API/orderapi/ImportOrder");}); // inisialisasi fileInputVar FileInput = function () {var var Offile = new Object ();//initialize FileInputvar = Function () {var var Offile = new baru (); // unggah) {var control = $ ('#' + ctrlname); // menginisialisasi gaya unggahan control.fileInput ({bahasa: 'zh', // atur bahasa unggah bahasa: unggah, // unggah alamat yang diizinkan filextensions: ['jpg', 'gif', 'png']]: 'jpg', 'gif', 'png']] showCaption: false, //Does the title browser browserClass: "btn btn-primary", //Button style//dropZoneEnabled: false, //Does the drag area//minImageWidth: 50, //MinimageWidth of the picture//minImageHeight: 50,//The minimum height of the picture//maxImageWidth: 1000,//The maximum width of the Picture // MaximageHeight: 1000, // Tinggi maksimum gambar // MaxFileSize: 0, // Unit ini adalah KB. Benar, PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>", msgfilestoomany: "Pilih jumlah file yang diunggah ({n}) melebihi nilai yang diizinkan {m}!",}); // Acara setelah pengunggahan file yang diizinkan $ ("TOX:" TOX: "TOX:" TEXLOAD "," TEXLOAD "," TEXLOAD (")." data, previewid, index) {$ ("#mymodal"). Modal ("hide"); var data = data.response.lstorderImport; if (data == tidak terdefinisi) {toastr.Error ('Tipe format file tidak benar'); return;} // 1. Menginisialisasi tabel var Otable = TableInit (); otable.init (data); $ ("#div_startImport"). Show ();});} return ofile;};menjelaskan:
(1) Metode FileInput () diteruskan dalam data JSON, yang memiliki banyak atribut. Setiap atribut mewakili karakteristik saat menginisialisasi kontrol unggahan. Jika tidak ada atribut ini yang ditetapkan, itu berarti bahwa pengaturan default digunakan. Jika Anda ingin melihat properti apa yang ada di dalamnya, Anda dapat membuka kode sumber fileInput.js, seperti yang ditunjukkan di ujungnya:
Jika properti ini tidak diatur secara khusus, nilai default akan digunakan.
(2) $ ("#txt_file"). On ("Fileuploaded", function (event, data, previewid, index) {} Metode ini mendaftarkan acara callback setelah mengunggah. Yaitu, setelah memproses file yang diunggah hari setelah sehari setelah memprosesnya, ia memasukkan metode untuk memprosesnya.
3. Metode yang sesuai dengan latar belakang C#
Apakah Anda ingat bahwa ada URL parameter dalam metode kontrol inisialisasi fileInput () di JS? Nilai yang sesuai dari URL ini menunjukkan metode pemrosesan C# setelah hari. Atau posting metode pemrosesan latar belakang.
[ActionName ("ImportOrder")] IMPORTORD OBYEK PUBLIK () {var Ofile = httpcontext.current.Request.files ["txt_file"]; var lstorderImport = Daftar baru <DTO_TO_ORDER_IMPORT> ();#region 0Data persiapan var lstexistorder = orderfant.) ();#region. x.order_no) .tolist (); var lsttMmodel = modelManager.find (); var lsttmmaterial = materialManager.find (); // var imax_import_index = lstexistorder.max (x => x.import_index); // IMAX_IMPORTORDER.MAX (x => x.Impport_index); // IMAX_IMPORTORDER.MAX = x. 0: IMAX_IMPORT_INDEX.Value;#Endregion#Region 1. Dapatkan objek buku kerja melalui stream iWorkbook workbook = null; if (Ofile.filename.endswith (". Xls")) {workbook = new hssfworkbook (Ofile.putstream);} {Ofile.filename. XSSFWorkbook (Ofile.InputStream);} if (workbook == null) {return new {};} // ............ menangani excel logika //orderManager.add(lstorder);lstorderMport = lstorderImport.orderby (x => x.import_statu) .tolist = loChort (); loForder (x => x.impport_statu) .tolist (); loordorder (x => x.import_statu).Karena proyek blogger adalah mengunggah Excel, logika NPOI digunakan di sini. Jika Anda mengunggah gambar dan file lainnya, Anda dapat menggunakan GDI untuk memproses gambar.
4. Unggah beberapa file secara bersamaan
Ketika beberapa file diunggah pada saat yang sama, meja depan akan mengirim beberapa permintaan asinkron ke latar belakang. Dengan kata lain, ketika tiga file diunggah pada saat yang sama, metode ImportOrder di latar belakang akan masuk tiga kali. Ini memungkinkan Anda untuk memproses tiga file secara bersamaan menggunakan beberapa utas.
3. Ringkasan
Penggunaan dasar bootstrap fileInput secara kasar diperkenalkan. Bahkan, ini adalah komponen yang diunggah dan tidak ada penggunaan lanjutan. Kuncinya adalah membuat antarmuka lebih ramah dan lebih baik meningkatkan pengalaman pengguna.
Saya akan memperkenalkan banyak hal kepada Anda tentang penggunaan komponen unggah file Bootstrap FileInput. Saya harap ini akan membantu Anda!