BootStrap はファイルのアップロード時の進行状況の表示を実装します

今回はファイルアップロード時に進行状況を表示するBootStrapについて説明します。以下は実際的なケースです。

【関連動画: ブートストラップチュートリアル】

1. 1日作業して、ようやくアップロードが成功したら、ずっと心配していたので、データベースへのパスを追加できます。アップロードが成功した後にそれを追加する方法について、ついにブートストラップが強力だと言わなければなりません。 js で記述する方法があり、ファイルのアップロード ボタンのスタイルを変更しましたが、ブートストラップが実際に機能するとは思いませんでした。スタイルは非常に優れており、プレビュー、画像、ファイル サイズ、形式などを制限できます。 . 進行状況バーもあります。

バックグラウンドコードは以前に書かれたものです

これはフロントエンドのコードのみです

覚えておいてください: 検証するときは、コンソールを使用して検証してください。コードが正しく記述されていても、アラートが表示されない場合があります

console.log("aaaa");

。 1. 対応する js とスタイルをインポートします

<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. モーダルボックスに追加します。name 属性は背景の code 属性に関連しており、クラスは file

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

である必要があることに注意してください。 アップロードが成功すると、ajax メソッドが表示されます。これは本当に素晴らしいです

うまくいくかどうかは試してみないと分からないこともあります

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

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS操作ブラウザの開閉

JS操作のフロントエンドキャッシュ

jsがCanvasをプラグインにカプセル化する方法

以上がBootStrap はファイルのアップロード時の進行状況の表示を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。