jQuery는 파일 업로드 진행률 표시줄 특수 효과를 구현합니다_jquery

업로드 진행률 표시줄은 일반적으로 jquery에 백엔드 스크립트를 추가하여 구현됩니다. 오늘은 파일 업로드 진행률 표시줄 효과를 구현하는 기본 PHP jQuery의 예를 소개합니다.

최근 프로젝트 진행률 표시줄을 만드는 효과가 나왔습니다. 이번 주에는 돈이 별로 없어서 이걸로 재고를 보충하겠습니다.

파일을 업로드하려면 먼저 "버튼"을 준비해야 합니다.

보기에도 좋고 구현도 매우 간단합니다.

<span class="upload-span">开始上传文件</span>
<button>太丑了，就用span来做了，可控性强。添加点css:
.upload-span{
  display: inline-block;
  width: 120px;
  height: 40px;
  color: #FFFFFF;
  text-align: center;
  line-height: 40px;
  background-color: blue;
  border: 2px solid blue;
  border-radius:5px;
  cursor: pointer;
  letter-spacing: 2px;
}

클릭 시 업로드 효과가 발동되며, 이후 이벤트가 추가됩니다.
보다 사실적으로 만들려면 진행률 표시줄을 표시하는 마스크와 컨트롤을 추가해야 합니다. 범위를 클릭하면 효과가 다음과 같이 표시됩니다.

 <div class="upload-mask"></div>
  <div class="upload-component">
    <div class="upload-close">
      <span class="upload-close-span">关闭</span>
    </div>
    <div class="upload-content">
      <div class="progress">
        <span class="upload-text"></span>
        <span class="uploaded"></span>
      </div>
      <div class="confirm-cancel">
        <span class="confirm">确认</span>
        <span class="cancel">取消</span>
      </div>
    </div>
  </div>

CSS 추가:

.upload-mask{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  background-color: rgba(84,84,84,0.3);
  display: none;
}
.upload-component{
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  margin-top: -60px;
  width: 240px;
  height: 120px;
  background-color: #FFFFFF;
  display:none;
}
.upload-close{
  position: relative;
  height: 30px;
  background-color: rgb(234,234,234);
}
.upload-close span{
  position: absolute;
  right: 15px;
  line-height: 30px;
  cursor: pointer;
}
.upload-content,.confirm-cancel{
  margin-top: 15px;
}
.progress{
  position:relative;
  width:90%;
  height:22px;
  margin-left: 4.88888%;
  text-align: center;
  line-height: 22px;
  /*background-color: blue;*/
  border:1px solid #ccc;
}
.upload-text{
  position:absolute;
  z-index: 99999;
  color:red;
}
.uploaded{
  position:absolute;
  left:0;
  z-index: 9999;
  width:0%;
  height:100%;
  background-color: blue;
  color:#FFFFFF;
}
.confirm-cancel span{
  display:inline-block;
  width:60px;
  height:30px;
  line-height: 30px;
  text-align: center;
  /*cursor:pointer;*/
  background-color:#ccc;
  cursor:wait;
}
.confirm{
  /*background-color: rgb(111,197,293);*/
  margin-left:40%;
}
.cancel{
  /*background-color: rgb(175,194,211);*/
  margin-left: 10px;
}

진행률 표시를 시뮬레이션하기 위해 여기서는 두 가지 범위가 사용됩니다.

<div class="progress">
  <span class="upload-text"></span>
  <span class="uploaded"></span>
</div>

위쪽은 백분율을 표시하는 데 사용되고 아래쪽은 색상을 채우는 데 사용됩니다.

.upload-text{
  position:absolute;
  z-index: 99999;
  color:red;
}
.uploaded{
  position:absolute;
  left:0;
  z-index: 9999;
  width:0%;
  height:100%;
  background-color: blue;
  color:#FFFFFF;
}

현실적으로 구현하기 위해 색상 범위의 배경색을 설정하고 너비는 진행률을 나타냅니다. 마지막으로 js를 사용하여 진행률 변경을 시뮬레이션합니다.

  // 模拟进度
  function progressBar() {
    var max = 100;
    var init = 0;
    var uploaded;
    var test = setInterval(function() {
      init += 10;
      uploaded = parseInt((init / max * 100)) + '%';
      $uploadTextSpan.text(uploaded).next().css({
  width:uploaded
  });
  if (init === 100) {
  clearInterval(test);
  $uploadTextSpan.text('上传完成');
  $('.confirm-cancel span').css({
   cursor:'pointer'
  });
  $('.confirm').css({
   backgroundColor:'rgb(111,197,293)'
  });
  $('.cancel').css({
   backgroundColor:'rgb(175,194,211)'
  })
  $closeConfirmCancel.on('click',closeConfirmCancel);
  } 
  else { 
  $closeConfirmCancel.off('click',closeConfirmCancel);
  $('.upload-close-span').on('click',function(){
   clearInterval(test);
   closeConfirmCancel();
  });
  $uploadMask.on('click',function() {
          clearInterval(test);
          closeConfirmCancel();
        })
      }
    },1000);
  }

JQuery는 업로드 비율과 기타 정보를 표시할 수 있는 파일 업로드 진행률 표시줄을 구현합니다.