文件異步下載 / 帶百分比 · PHP/Python/前端/Linux 等等學習筆記

[TOC] ## 文件異步下載 ```js <a class="js-ajax-down" href="javascript:void(0);" data-href="/fileinfo?gid=D3A5E74C-573B-EDD3-A89B-FD074FC33AB1" title="下載" >下載</a> <script type="text/javascript"> $(function () { $(".js-ajax-down").click(function () { //顯示等待效果 var url = $(this).data('href'); $.getJSON(url,function (res) { if(res.status===0){ alert("請求出錯"+res.msg); return ; } var down_url =res.data.down_url; var a = document.createElement('a'); a.href = down_url; $("body").append(a); a.click(); $(a).remove(); }); return false; }); }) </script> ``` ## 異步帶下載百分比異步下載文件需要在嵌套一層異步 ```  <div id="filedown" style="display: none;width: 300px;margin-bottom: 10px;"> <p>下載:</p> <div class="uploadify-progress"> <div class="uploadify-progress-bar" style="width: 10%;"></div> </div> <span class="up_percent">0%</span><span class="uploadedsize set-file-style">0MB</span><span class="set-file-style">/</span><span class="totalsize set-file-style">0MB</span><span title="cn_windows_server_2008_r2_hpc_x64_dvd_552764.iso" class="up_filename">cn_windows_server_2008_r2_hpc_x64_dvd_552764.iso</span> </div>  //使用了 progressJs 插件 var fileDownDom = $("#filedown"); $.post(url,data,function(res){ var res.info=res.downurl $.ajax({ type:'GET', url: res.url, xhrFields:{ onprogress:function(event){ var percent =(event.loaded/filesize)*100; percent = percent.toFixed(2); // 大于 1MB var loaded=0,totalSize=0,unit=''; if (filesize>1000000){ loaded = event.loaded/1000000; totalSize = filesize/1000000; unit="MB"; // 小于 1MB }else{ loaded = event.loaded/1000; totalSize = filesize/1000; unit="KB"; } fileDownDom.find('.uploadify-progress-bar').css('width',percent+'%'); fileDownDom.find('.up_percent').text(percent); fileDownDom.find('.uploadedsize').text(loaded.toFixed(2)+unit); fileDownDom.find('.totalsize').text(totalSize.toFixed(2)+unit); fileDownDom.find('.up_filename').text(res.info.file_name); } }, complete: function() { fileDownDom.hide(); // 如果發現無法下載.添加此行 location.href = res.url ; }, }); },"JSON"); ```