BootStrap은 파일 업로드 시 진행 상황 표시를 구현합니다.

이번에는 파일 업로드 시 진행 상황을 표시하는 BootStrap을 가져오겠습니다. 파일 업로드 시 진행 상황을 표시하는 BootStrap의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

【관련 영상 추천 : 부트스트랩 튜토리얼】

1. 고민하다가 드디어 업로드 성공 후 데이터베이스에 경로를 추가하면 됩니다. 업로드가 성공한 후 추가하는 방법에 대해 데이터베이스에 경로를 추가하고 마침내 완료했습니다. 이전에 ajax가 파일을 업로드할 수 없다고 말해야 했습니다. 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 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

JS 작업 브라우저 열기 및 닫기

JS 작업 프런트 엔드 캐시

js가 Canvas를 플러그인으로 캡슐화하는 방법

위 내용은 BootStrap은 파일 업로드 시 진행 상황 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!