BootStrap implements display progress when uploading files

This time I will bring you BootStrap to display progress when uploading files. What are the precautions for BootStrap to display progress when uploading files? The following is a practical case, let's take a look.

【Related video recommendation: Bootstrap tutorial】

1. After working on it for a day, I finally made it. After the upload was successful, You can add the path to the database, because I have been worrying about how to add the path to the database after the upload is successful. I finally figured it out. I am so happy. I have to say that bootstrap is powerful. I said before that ajax cannot upload files, and then I figured out a way. Written in js, I changed the style of the upload file button, but I didn't expect bootstrap to be really powerful. The style is not bad, and it can preview, pictures, limit file size, format, etc., and there is also a progress bar.

The background code has been written before

This is only the front-end code

Remember: when verifying, try to use the console to verify. Sometimes your code is written correctly, but the alert may not be displayed

console.log("aaaa");

1. Import the corresponding js and style

<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. Add it to the modal box. Be sure to remember that the name attribute is related to the code attribute of your background, and the class needs to be 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>

After the upload is successful, there is an ajax method, which is really amazing

Sometimes you won’t know until you try it, can you

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

JS operation browser on and off

JS operation front-end cache

How to encapsulate Canvas into a plug-in in js

The above is the detailed content of BootStrap implements display progress when uploading files. For more information, please follow other related articles on the PHP Chinese website!