BootStrap implementiert die Anzeige des Fortschritts beim Hochladen von Dateien

Dieses Mal bringe ich Ihnen BootStrap, um den Fortschritt beim Hochladen von Dateien anzuzeigen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

1. Nachdem ich einen Tag lang daran gearbeitet hatte, habe ich es endlich geschafft. Nachdem der Upload erfolgreich war, können Sie den Pfad zur Datenbank hinzufügen, da ich mir Gedanken darüber gemacht habe, wie ich den Pfad zur Datenbank hinzufügen kann, nachdem der Upload erfolgreich war. Ich muss sagen, dass ich es geschafft habe Ich habe vorher gesagt, dass Ajax keine Dateien hochladen kann, und dann habe ich einen Weg gefunden, den Stil der Schaltfläche zum Hochladen von Dateien zu ändern ist nicht schlecht, und es kann eine Vorschau anzeigen, Bilder anzeigen, die Dateigröße, das Format usw. begrenzen, und es gibt auch einen Fortschrittsbalken.

Der Hintergrundcode wurde bereits vor

geschrieben Dies ist nur der Frontend-Code

Denken Sie daran: Versuchen Sie bei der Überprüfung, die Konsole zur Überprüfung zu verwenden. Manchmal ist Ihr Code korrekt geschrieben, aber die Warnung wird möglicherweise nicht angezeigt

console.log("aaaa");

1. Importieren Sie die entsprechenden js und Stile

<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. Fügen Sie es dem modalen Feld hinzu. Denken Sie daran, dass das Namensattribut mit dem Codeattribut Ihres Hintergrunds zusammenhängt und die Klasse eine Datei sein muss

<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>

Nach erfolgreichem Hochladen gibt es eine Ajax-Methode, was wirklich erstaunlich ist

Manchmal werden Sie es nur wissen, wenn Sie es versuchen. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zum PHP-Chinesen Webseite!

//上传文件
 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 (); //记得加载，初始化

Empfohlene Lektüre:

JS-Betriebsbrowser ein- und ausschalten

JS-Betriebs-Front-End-Cache

So kapseln Sie Canvas in ein Plug-in in js

Das obige ist der detaillierte Inhalt vonBootStrap implementiert die Anzeige des Fortschritts beim Hochladen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!