Utilisation de base de l'extension d'upload fileinput de bootstrap

Préambule :

Les trois articles précédents ont présenté quelques utilisations courantes de bootstrap table, et l'auteur semble être devenu accro à ce style plat. Il y a deux jours, j'ai dû créer une fonction d'importation d'Excel, utilisant le tag input type='file' en arrière-plan, ce qui était vraiment laid. Alors, j'ai décidé de trouver un composant d'upload plus joli pour le remplacer. Comme bootstrap est open-source, la communauté en contient certainement beaucoup, y compris des composants d'upload courants. Après une recherche approfondie, grâce à l'effort déployé, j'ai finalement trouvé ce composant : bootstrap fileinput. Concernant l'utilisation simple de ce composant, en s'appuyant sur l'expérience de développement de la frame de développement BootStrap Metronic, un résumé des méthodes courantes de Bootstrap File Input pour le téléversement de fichiers, bien que de nombreux détails n'aient pas été abordés. Alors, pendant que je terminais la tâche de développement, j'ai résumé quelques utilisations courantes de ce composant. Je le note ici, non seulement pour moi-même, mais aussi pour faciliter l'utilisation des amis qui en ont besoin.

Adresse du code source et de l'API :

bootstrap-Code source de fileinput :https://github.com/kartik-v/bootstrap-fileinput

bootstrap-API en ligne de fileinput :http://plugins.krajee.com/file-input

bootstrap-Démonstration de fileinput :http://plugins.krajee.com/file-basic-usage-demo

Première partie : Montre des effets

　1、L'original input type='file' est tout simplement insupportable.

2、bootstrap fileinput sans décoration (évolution de base de bootstrap fileinput)

3、bootstrap fileinput évolué en profondeur : traduction en chinois, téléchargement par glisser-déposer, vérification de l'extension de fichier (si ce n'est pas le fichier nécessaire, ne pas télécharger)

Téléchargement par glisser-déposer

En téléchargement

4、bootstrap fileinput évolué en profondeur : permet de télécharger plusieurs fichiers en multithreading simultané.

En téléchargement

Après le téléchargement

Deuxième partie : Exemple de code

　Comment ça va ? Comment est l'effet ? Ne vous inquiétez pas, nous allons réaliser les effets ci-dessus étape par étape.

1、cshtml page

D'abord, incluez les fichiers js et css nécessaires.

//bootstrap fileinput 
 bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include( 
    "~/Content/bootstrap-fileinput/js/fileinput.min.js", 
    "~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js")); 
 bundles.Add(new 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") 

Ensuite, définissez l'étiquette input type='file'

<form> 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog modal-lg" role="document"> 
   <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">Veuillez choisir un fichier Excel</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/Données/ExcelTemplate/Order.xlsx" rel="external nofollow" class="form-control" style="border:none;">Télécharger le modèle d'importation</a> 
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 
    </div></div> 
  </div> 
 </div> 
</form>

Portez votre attention sur cette phrase :

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 

multiple signifie qu'il est permis de téléverser plusieurs fichiers en même temps, class="file-"loading" représente le style de l'étiquette. C'est très important, si class="file", la traduction en chinois ne peut pas fonctionner.

2、js initialisation

$(function () { 
 //0. Initialiser fileinput 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//initialiser fileinput 
var FileInput = function () { 
 var oFile = new Object(); 
 //initialiser le contrôle fileinput (initialisation pour la première fois) 
 oFile.Init = function(ctrlName, uploadUrl) { 
 var control = $('#' + ctrlName); 
 //initialiser le style du contrôle de téléversement 
 control.fileinput({ 
  language: 'zh', //réglage de la langue 
  uploadUrl: uploadUrl, //l'adresse de téléversement 
  allowedFileExtensions: ['jpg', 'gif', 'png'],//Extension de fichier acceptée 
  showUpload: true, //Afficher ou non le bouton de téléchargement 
  showCaption: false,//Afficher ou non le titre 
  browseClass: "btn btn-primary", //Style du bouton  
  //dropZoneEnabled: false,//Afficher ou non la zone de glisser-déposer 
  //minImageWidth: 50, //La largeur minimale de l'image 
  //minImageHeight: 50,//La hauteur minimale de l'image 
  //maxImageWidth: 1000,//La largeur maximale de l'image 
  //maxImageHeight: 1000,//La hauteur maximale de l'image 
  //maxFileSize: 0,//en unité de kb, si c'est 0, cela signifie qu'il n'y a pas de limite de taille de fichier 
  //minFileCount: 0, 
  maxFileCount: 10, //représente le nombre maximum de fichiers téléchargeables simultanément 
  enctype: 'multipart/form-data', 
  validateInitialCount:true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" 
  msgFilesTooMany: "Le nombre de fichiers sélectionnés ({n}) dépasse le nombre maximum autorisé {m} !", 
 }); 
 //Événement après le téléchargement du fichier importé 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('Le type de format de fichier n'est pas correct'); 
   return; 
  } 
  //1.Initialisation du tableau 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
} 
 return oFile; 
}; 

Explication :

（1La méthode fileinput() prend en entrée une données JSON, qui contient de nombreuses propriétés, chaque propriété représentant les caractéristiques par défaut de l'initialisation du contrôle de téléchargement. Si toutes ces propriétés ne sont pas définies, cela signifie qu'on utilise les réglages par défaut. Si les amis du jardin veulent voir quels sont les propriétés, ils peuvent ouvrir le code source de fileinput.js, comme montré à la fin :

Ces propriétés utiliseront les valeurs par défaut si elles ne sont pas spécifiquement définies.

（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} Cette méthode enregistre l'événement de rappel après le téléversement. C'est-à-dire que après le traitement du fichier téléversé, entrez dans cette méthode pour traiter.

3Méthode correspondante en C# du backend

　Se souvient-on de l'argument url dans la méthode d'initialisation des contrôles fileinput() en js ? Cette valeur de url indique la méthode de traitement correspondante du backend en C#. Voici la méthode de traitement du backend.

[ActionName("ImportOrder")] 
 public object ImportOrder() 
 { 
  var oFile = HttpContext.Current.Request.Files["txt_file"]; 
  var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); 
  #region Préparation des données 0.0 
  var lstExistOrder = orderManager.Find(); 
  var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList(); 
  var lstTmModel = modelManager.Find(); 
  var lstTmMaterial = materialManager.Find(); 
  //var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX); 
  //iMax_Import_Index = iMax_Import_Index == null ?63; 0 : iMax_Import_Index.Value; 
  #endregion 
  #region 1Obtient l'objet Workbook via Stream 
  IWorkbook workbook = null; 
  if (oFile.FileName.EndsWith(".xls")) 
  { 
   workbook = new HSSFWorkbook(oFile.InputStream); 
  } 
  else if (oFile.FileName.EndsWith(".xlsx")) 
  { 
   workbook = new XSSFWorkbook(oFile.InputStream); 
  } 
  if (workbook == null) 
  { 
   return new { }; 
  } 
  //...............logique de traitement excel 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  return new { lstOrderImport = lstOrderImport }; 
 } 

Comme le projet du blogueur est le téléchargement d'excel, ici, nous utilisons la logique de NPOI. Si vous téléchargez des images ou d'autres fichiers, vous pouvez utiliser GDI pour traiter les images.

4Téléchargement simultané de plusieurs fichiers

Lorsque plusieurs fichiers sont téléchargés en même temps, plusieurs requêtes asynchrones sont envoyées au backend, ce qui signifie que lorsque trois fichiers sont téléchargés en même temps, la méthode ImportOrder du backend est appelée trois fois. De cette manière, il est possible d'utiliser des threads multiples pour traiter trois fichiers en même temps.

Troisième partie : Résumé

Voilà pour la présentation de base de bootstrap fileinput, en réalité, c'est un composant de téléchargement. Il n'existe pas d'utilisation avancée. L'accent est mis sur la conception de l'interface pour améliorer l'expérience utilisateur. Si vous avez des questions, n'hésitez pas à me laisser un message, je répondrai à temps. Je tiens également à remercier chaleureusement tous ceux qui soutiennent le site Web de tutoriel d'alarme !

Déclaration : le contenu de cet article est issu du réseau, la propriété intellectuelle appartient à ses auteurs respectifs, le contenu est apporté par les utilisateurs d'Internet de manière spontanée et est téléversé, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w3Déclaration : le contenu de cet article est issu du réseau, la propriété intellectuelle appartient à ses auteurs respectifs, le contenu est apporté par les utilisateurs d'Internet de manière spontanée et est téléversé, ce site Web ne détient pas de propriété, n'a pas été traité par l'éditeur humain et n'assume pas de responsabilité juridique connexe. Si vous trouvez du contenu suspect de violation de droits d'auteur, veuillez envoyer un e-mail à : notice#w