J'ai été épargné récemment. J'ai résumé certaines utilisations courantes des composants de fichier bootstrap. Je le partagerai avec la plate-forme Network Wulin pour votre référence, et il est également pratique pour les recherches futures. Veuillez me pardonner la pauvre écriture de cet article.
1. Affichage d'effet
1. Le type d'entrée d'origine = 'fichier' est si insupportable pour le regarder.
2. Bootstrap FileInput sans décoration: (Évolution primaire du fichier bootstrap)
3.
Faire glisser et dépasser le téléchargement
Téléchargement
4. Bootstrap FileInput Ultimate Evolution: permet à plusieurs fichiers d'être téléchargés en même temps par plusieurs threads.
Téléchargement
Une fois le téléchargement terminé
2. Exemples de code
Et ça? Quelle est l'efficacité? Ne vous inquiétez pas, nous obtiendrons les résultats ci-dessus étape par étape.
1. Page CSHTML
Tout d'abord, introduisez les fichiers JS et CSS requis.
// bootstrap fileInputBundles.add (new ScriptBundle ("~ / Content / bootstrap-fileinput / js"). include ("~ / contenu / bootstrap-fileinput / js / fileInput.min.js", "~ / content / bootstrap-finput / js / fileinput_locale_zh.js"); StyleBundle ("~ / Content / Bootstrap-FileInput / CSS"). Inclure ("~ / Content / Bootstrap-FileInput / CSS / FileInput.min.css")); @ scripts.render ("~ / Content / Bootstrap-FileInput / JS") @ Styles.Render ("~ / Contenu / Bootsstrap-Pileinput / CSSS")Définissez ensuite la balise de type d'entrée = «fichier»
<form> <div id = "mymodal" tabindex = "- 1" role = "dialog" aria-labelledBy = "mymodallabel"> <div role = "document"> <div> <div> <button type = "Button" data-dismiss = "modal" aria-label = "bouth" id = "myModallabel"> Veuillez sélectionner le fichier Excel </h4> </ div> <v> <a href = "~ / data / exceltemplate / order.xlsx" style = "border: non;"> Télécharger le modèle d'importation </a> <entrée type = "file" name = "txt_file" id = "txt_file" multiple /> </v>
Concentrez-vous sur cette phrase:
<input type = "file" name = "txt_file" id = "txt_file" multiple />
Plusieurs signifient que plusieurs fichiers sont autorisés à être téléchargés en même temps, et Class = "File-Wading" signifie le style de la balise.
2. Initialisation JS
$ (function () {// 0. Initialize fileInputVar ofileInput = new FileInput (); odiileInput.init ("txt_file", "/ api / orderAPI / ImportOrder");}); // initialiser FileInputVar fileInput = function () {var ofile. uploadUrl) {var contrôle = $ ('#' + ctrlName); // initialiser le style du téléchargement Control.FileInput ({Language: 'Zh', // Définit la langue UploadUrl: uploadurl, // Adresse de télécharge Showcaption: false, // Le titre de navigateur BrowserSclass: "BTN BTN-PRIMARY", // Button Style // DropZoneEnabled: False, // La zone de drag // minimagewidth: 50, // minimagewidth de l'image // minimageHeight: 50, // la hauteur minimale de l'image // Maximagewidth: 1000, // la largeur du maximum de la largeur de l'image // Picture // MaximageHeight: 1000, // La hauteur maximale de l'image // MaxFileSize: 0, // L'unité est KB. true, préviewFileIcon: "<i class = 'Glyphicon Glyphicon-King'> </i>", msgFileStoomany: "Sélectionnez le nombre de fichiers téléchargés ({n}) dépasse la valeur maximale autorisée {M}!",}); // Events après le fichier d'importation est terminé $ ("# txxt_file"). sur ("FileupLoada", fonction ("# txxt_file"). sur sur ("Fileup. Aperçu, index) {$ ("# myModal"). Modal ("Hide"); var data = data.Response.lstOrderImport; if (data == undefined) {toastr.error ('le type de format de fichier est incorrect'); return;} // 1. TableInit (); otable.init (data); $ ("# div_startimport"). Show ();});} return onile;};illustrer:
(1) La méthode FileInput () est transmise dans une données JSON, qui a de nombreux attributs. Chaque attribut représente les caractéristiques lors de l'initialisation du contrôle de téléchargement. Si aucun de ces attributs n'est défini, cela signifie que les paramètres par défaut sont utilisés. Si vous souhaitez voir quelles propriétés sont à l'intérieur, vous pouvez ouvrir le code source de FileInput.js, comme indiqué à la fin:
Si ces propriétés ne sont pas définies spécifiquement, les valeurs par défaut seront utilisées.
(2) $ ("# txt_file"). Sur ("Fileuploaded", fonction (événement, données, préviewid, index) {} Cette méthode enregistre l'événement de rappel après le téléchargement.
3. Méthodes correspondant à l'arrière-plan C #
Vous souvenez-vous qu'il existe une URL de paramètre dans la méthode de contrôle d'initialisation FileInput () dans JS? La valeur correspondante de cette URL indique la méthode de traitement correspondante de C # après la journée. Ou publier la méthode de traitement des antécédents.
[ActionName ("ImportOrder")] Objet public ImportOrder () {var ofile = httpcontext.current.request.files ["txt_file"]; var lStOrderImport = new list <dto_to_order_import> (); # Region 0.Data préparation var lstexistOrder = OrderManager.Find (); var lstorderNo) x.order_no) .tolist (); var lStTMODEL = ModelManager.Find (); var lStmaterial = MaterialManager.Find (); // var imax_import_index = lstexistOrder.max (x => x.import_index); // IMAX_IMPORD_INDEX = IMAX_IMPORT_INDEX == Null? 0: IMAX_IMPORT_INDEX.VALUE; # Endregion # Region 1. Obtenez l'objet Workbook via Stream IworkBook Workbook = NULL; if (OFile.FileName.endswith (". Xls")) {Workbook = new hssfworkbook (OFile.inputStream);} else if (ofile.filename.endswith (".". Xssfworkbook (odile.inputStream);} if (workbook == null) {return new {};} // ............ manipuler Excel Logic //OrderManager.Add(lstorder) ;lstorderImport = lstorderIMport.orderBy (x => x.import_statu) .tolist (); return new {LstrorderImport = LSTORDIMPORT};).Étant donné que le projet du blogueur est de télécharger Excel, la logique NPOI est utilisée ici. Si vous téléchargez des images et d'autres fichiers, vous pouvez utiliser GDI pour traiter les images.
4. Téléchargez plusieurs fichiers en même temps
Lorsque plusieurs fichiers sont téléchargés en même temps, la réception enverra plusieurs demandes asynchrones en arrière-plan. C'est-à-dire que lorsque trois fichiers sont téléchargés en même temps, la méthode d'importorder en arrière-plan entrera trois fois. Cela vous permet de traiter trois fichiers en même temps à l'aide de plusieurs threads.
3. Résumé
L'utilisation de base de Bootstrap FileInput est introduite à peu près. En fait, il s'agit d'un composant téléchargé et il n'y a pas de usages avancés. La clé est de rendre l'interface plus conviviale et de mieux augmenter l'expérience utilisateur.
Je vous présenterai tellement sur l'utilisation des composants de téléchargement de fichiers Bootstrap FileInput. J'espère que cela vous sera utile!