# 六、PHP實現上傳文件進度條 項目里有一個功能是上傳文件,但是為了增強體驗,所以呢,整一個上傳的進度條,而我發現,網上的材料好像并不多,好多都沒用,到后來,改吧改吧,終于可以實現了,具體功能需要設計到ifram,是動態生成的,當然如果是拿來主義者,則無需考慮如何實現,因為demo完全可以運行的  不多說,上代碼 ``` <input type="hidden" id="hiddenfonturl" /> <!--這個是用來保存上傳好的文件路徑--!> <div class="row cl"> <label class="form-label col-3"><span class="c-red">*</span>上傳字體：</label> <div class="formControls col-5"> <div style="width:500px;margin:10px auto; border:solid 1px #ddd; overflow:hidden; "> <form id='myupload' action='up.php' method='post' enctype='multipart/form-data'> <input type="file" id="uploadphoto" name="uploadfile" value="請點擊上傳圖片" style="display:none;" /> </form> <p class="res"></p> <div class="progress"> <div class="progress-bar progress-bar-striped" ><span class="percent">0%</span></div> </div> <a href="javascript:void(0);" onclick="uploadphoto.click()" class="uploadbtn">點擊上傳文件</a> </div> </div> <div class="col-4"></div> </div> $(document).ready(function(e) { //這里就是代碼的實現了,當然還包括上傳插件 var progress = $(".progress"); var progress_bar = $(".progress-bar"); var percent = $('.percent'); $("#uploadphoto").change(function(){ $("#myupload").ajaxSubmit({ dataType: 'json', //數據格式為json//可以選擇其他格式,但是為了實用,所以用json beforeSend: function() { //開始上傳 progress.show(); var percentVal = '0%'; progress_bar.width(percentVal); percent.html(percentVal); }, uploadProgress: function(event, position, total, percentComplete) { var percentVal = percentComplete + '%'; //獲得進度 progress_bar.width(percentVal); //上傳進度條寬度變寬 percent.html(percentVal); //顯示上傳進度百分比 }, success: function(data) { if(data.status == 1){ //接收方式可以更人性化,自行修改 var src = data.url; var attstr= '<img src="'+src+'">'; $("#hiddenfonturl").val(data.url); $(".res").html("字體:"+data.name+"成功，字體大小："+data.size+"K,文件地址："+data.url); }else{ $(".res").html(data.content); } progress.hide(); }, error:function(xhr){ //上傳失敗 alert("上傳失敗"); progress.hide(); } }); }); }); ```