jquery implementation file upload progress bar special effects _jquery

Upload progress bar is usually from the front of jquery plus back-end script script to achieve, today we introduce a basic Php+jquery implementation file upload progress bar Effect example, the details are as follows.

Recently, a project to make the effect of a progress bar, this has not really done before. There's nothing left this week, just take this to fill the numbers.

File upload, you have to prepare a "button":

This looks pretty good, and the implementation is also very simple:

<span class= "Upload-span" > Start uploading Files </span>
<button> It's ugly, it's done with span, it's controllable. Add dot 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;
}

When clicked, the upload effect is triggered, then the event is added.
To be realistic, add a mask and a control that shows the progress bar, and when you click Span, the effect is probably this:

 <div class= "Upload-mask" ></div>
  <div class= "upload-component" >
    <div class= " Upload-close ">
      <span class=" Upload-close-span "> Off </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" > Confirmation </span>
        <span class= "Cancel" > Cancel </span>
      </div>
    </ Div>
  </div>

Add a little CSS up:

. 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;
 }

To simulate the progress of the display, here are two spans:

<div class= "Progress" >
  <span class= "Upload-text" ></span>
  <span class= "uploaded" > </span>
</div>

The above one is used to display percentages, the following one to fill the color:

. 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;
}

In order to be realistic, to fill the span set background color, its width is the percentage of progress, and finally use JS to simulate the progress of the changes:

/Simulated progress 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 = = =) {clearinterval (test);
  $uploadTextSpan. Text (' upload complete ');
  $ ('. 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 implementation File upload progress bar, can show the percentage of upload and so on, the content is here, I hope you can enjoy.