JQuery implements a simple File Upload progress bar and jquery File Upload

JQuery implements a simple File Upload progress bar and jquery File Upload

This example describes how jQuery implements the File Upload progress bar. Share it with you for your reference. The details are as follows:
The running effect is as follows:

The Code is as follows:

<! DOCTYPE html> 
CSS code:

.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;}.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;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;background-color:#ccc;cursor:wait;}.confirm{margin-left:40%;}.cancel{margin-left:10px;} 
JQuery code:

$ (Function () {var $ uploadSpan = $ ('. upload-span '); var $ uploadMask = $ ('. upload-mask '); var $ uploadContent = $ ('. upload-component '); var $ closeConfirmCancel = $ ('. upload-close-span ,. confirm ,. cancel '); var $ uploadTextSpan = $ ('. upload-text '); function showMask () {$ (". upload-mask ,. upload-component "cmd.css ({display: 'block'}); progressBar (); $ uploadSpan. off ('click', showMask);} function hiddenmask({{uploadmask.css ({display: 'none'}); $ uploadSpan. on ('click', showMask);} function closeconfirmcancel({{{uploadcontent.css ({display: ↓ ({width: 0}); hiddenMask () ;}// simulate progress function progressBar () {var max = 100; var init = 0; var uploaded; var test = setInterval (function () {init + = 5; uploaded = parseInt (init/max * loads ({width: uploaded}); if (init = 100) {clearInterval (test); $ uploadTextSpan. text ('upload completed '); $ ('. confirm-cancel span'{.css ({cursor: 'pointer'{}}('.confirm'}.css ({backgroundColor: Fill ({backgroundColor: 'rgb (175,194,211) '}) $ closeConfirmCancel. on ('click', closeConfirmCancel);} else {$ closeConfirmCancel. off ('click', closeConfirmCancel); $ ('. upload-close-span '). on ('click', function () {clearInterval (test); closeConfirmCancel () ;}}, 1000) ;}$ uploadSpan. on ('click', showMask );})
JQuery implements the File Upload progress bar, which displays the upload percentage and other information. The content is here and I hope you will like it.