h5完美實現無刷新上傳並附帶上傳效果

時間 2019-12-08
標籤 h5 完美實現刷新上傳並附帶上效果简体版
原文原文鏈接
附帶上傳源碼以下：javascript
  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4   <title>測試上傳功能</title>
  5   <meta charset='utf-8'/>
  6   <style type="text/css">
  7         .vue-file-control{
  8             height:28px;
  9             width:500px;
 10             margin:100px;
 11         }
 12        .inputFileUpload
 13         {
 14             display: block;
 15             position: relative;
 16             width: 120px;
 17             padding:8px 12px;
 18             overflow: hidden;
 19             border: 1px solid #EBEBEB;
 20             background: none repeat scroll 0 0 #F3F3F3;
 21             color: #999999;
 22             cursor: pointer;
 23             text-align: center;
 24             float: left;
 25             margin-right:5px;
 26             border-radius:3px;
 27         }
 28         #textFileName
 29         {
 30             cursor: pointer;
 31             display: block;
 32             height:31px;
 33             width:200px;
 34             text-align: center;
 35             overflow:hidden;
 36             border:1px solid #f1f1f1;
 37             display:inline-block;
 38             border-radius:3px;
 39         }
 40         .btnUpload{
 41            display: inline-block;
 42            padding:8px 10px;
 43            background: #7CBAE9;
 44            color:white;
 45            margin-left:10px;
 46            position:absolute;
 47            cursor: pointer;
 48            border-radius:3px;
 49         }
 50         .filePreview
 51         {
 52             cursor: pointer;
 53             position: absolute;
 54             top: 0;
 55             left:0;
 56             width: 150px;
 57             height: 30px;
 58             font-size: 150px; /* 增大不一樣瀏覽器的可點擊區域 */
 59             opacity: 0; /* 實現的關鍵點 */
 60             filter: alpha(opacity=0); /* 兼容IE */
 61         }
 62         .progressBarContainer{
 63            position:relative;
 64            margin-top:10px;
 65            height:8px;
 66            background:#f6f6f6;
 67            border-radius:3px;
 68            width:100%;
 69         }
 70         .progressBarContainer>#loadingBar{
 71            position:absolute;
 72            height:8px;
 73            background:#09bb07;
 74            border-radius:3px;
 75         }
 76         .progressBarContainer>#percentBar{
 77            position:absolute;
 78            margin-top:22px;
 79         }
 80         #linkPreviewPDF{
 81            margin-left: 80px;
 82            margin-top: 15px;
 83            display: none;
 84         }
 85   </style>
 86   <script src='./jquery.js'></script>
 87 </head>
 88 <body>
 89   <div class='vue-file-control'>
 90     <div class="inputFileUpload">
 91       <span>選擇上傳的文件</span>
 92       <input title="支持pdf文件上傳，文件小於5M" class="filePreview" type="file" accept='application/pdf' onchange="document.getElementById('textFileName').value=this.value" single></div>
 93     <input type='text' id="textFileName" />
 94     <span class='btnUpload' >點擊上傳</span>
 95     <div class='progressBarContainer'>
 96       <div id='loadingBar'></div>
 97       <div id="percentBar"></div>
 98     </div>
 99     <div  id='linkPreviewPDF'>
100       <a href="#" >點擊預覽</a>
101     </div>
102   </div>
103   <script type="text/javascript">
104       $(".btnUpload").on("click",function(){
105           var file = $('input[type=file]')[0].files[0];
106           var form = new FormData();  
107           form.append("file_type", "pdf");
108           form.append("subpath", "//sub//test");
109           form.append("upload_userid", "1");
110           form.append("file_original_name", file.name);                       
111           form.append("file", file);
112 
113           $.ajax({
114               url: 'http://192.168.217.12/files/api/uploadfile',
115               type: 'POST', 
116               data: form,
117               processData: false,
118               contentType: false,
119               xhr: function() { 
120                   var xhr = $.ajaxSettings.xhr();  
121                   if (xhr.upload) {  
122                      //上傳進度操做
123                       xhr.upload.addEventListener('progress', function(e) {
124                           var percentCount = ((e.loaded/e.total)*100).toFixed(0);
125                           $('#loadingBar').css({"width":percentCount+"%"}); 
126                           if(percentCount==100){
127                              $("#percentBar").html("已完成");
128                           }else{
129                              $("#percentBar").html(percentCount+"%");
130                           }
131                       }, false);  
132                   }  
133                   return xhr;  
134               }
135           }).done(function(res){
136               console.log("上傳成功");
137               $("div#linkPreviewPDF").find("a").attr("href","http://192.168.217.12"+res.returnObj.url).end().show();
138           }).fail(function(err){
139               console.log("上傳失敗");
140           });
141       })
142         
143   </script>
144 </body>
145 </html>