# 六、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(); } }); }); }); ```