BootStrap implémente l'affichage de la progression lors du téléchargement de fichiers

Cette fois, je vais vous apporter BootStrap pour afficher la progression lors du téléchargement de fichiers. Quelles sont les précautions à prendre pour que BootStrap affiche la progression lors du téléchargement de fichiers ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

[Recommandations vidéo associées : Tutoriel Bootstrap]

1. Après avoir travaillé dessus pendant une journée, je l'ai finalement fait. Une fois le téléchargement réussi, vous pouvez ajouter le chemin d'accès à la base de données, car je me demandais comment ajouter le chemin d'accès à la base de données une fois le téléchargement réussi, j'ai finalement compris, je dois le dire. ce bootstrap est puissant. J'ai déjà dit qu'ajax ne pouvait pas télécharger de fichiers, puis j'ai trouvé un moyen d'écrire en js, j'ai changé le style du bouton de téléchargement de fichier, mais je ne m'attendais pas à ce que bootstrap soit vraiment puissant. n'est pas mauvais, et il peut prévisualiser des images, limiter la taille des fichiers, le format, etc., et il y a aussi une barre de progression.

Le code d'arrière-plan a déjà été écrit

Ceci n'est que le code frontal

N'oubliez pas : lors de la vérification, essayez d'utiliser la console pour vérifier. Parfois, votre code est écrit correctement, mais l'alerte peut ne pas s'afficher

console.log("aaaa");

. 1. Importez les js et styles correspondants

<script type="text/javascript" src="jsbootstrap/locales/zh.js"></script>
<script type="text/javascript" src="jsbootstrap/fileinput.min.js" ></script>
<link href="css/css/fileinput.min.css" rel="external nofollow" rel="stylesheet">

2. Ajoutez-le à la zone modale. N'oubliez pas que l'attribut name est lié à l'attribut code de votre arrière-plan et que la classe doit être un fichier

<input type="file" name="my" class="file" id="aaa" data-show-upload="true" data-show-caption="true"><br>
<span style="font-family: Arial, Verdana, sans-serif;">3.具体的文件上传的方法</span>

. Il existe une méthode ajax une fois le téléchargement réussi, ce qui est vraiment incroyable

Parfois, vous ne le saurez que si vous l'essayez.

//上传文件
 Initfileinput = function (uploadurl){
  $("#aaa").fileinput({
   //uploadUrl: "../fileinfo/save", // server upload action
   uploadUrl:"https://localhost:8080/GD/UploadAction_execute.action",
   required: true,
   showBrowse: true,
   browseOnZoneClick: true,
   dropZoneEnabled: false,
   allowedFileExtensions: ["jpg", "xlsx"],//只能选择xls,和xlsx格式的文件提交
   //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
   layoutTemplates:{ actionUpload:''},
   /*上传成功之后运行*/
   fileuploaded:$("#aaa").on("fileuploaded", function (event, data, previewId, index) {
    console.log("Upload success");
    var a = document.getElementById('aaa').value;
    console.log(a);
    $.ajax({
     type:"post",
     async:false,
     url:"https://localhost:8080/GD/UploadAction_add.action",
     data:{
      "filepath.path" : a
     },
     dataType:"json",
     success:function () {
      console.log("添加成功");
     }
    })
   }),
   /*上传出错误处理*/
   fileerror:$('#aaa').on('fileerror', function(event, data, msg) {
    console.log("Upload failed")
   }),
  });
 }
 Initfileinput (); //记得加载，初始化

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le php chinois. site web!

Lecture recommandée :

Activation et désactivation du navigateur d'opération JS

Cache frontal d'opération JS

Comment encapsuler Canvas dans un plug-in en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!