头像

php+ajax无刷新上传带进度条

2019-05-27 15:17:34 收藏    来源:PHP代码   浏览()   评论 ( 0 )   

php+ajax无刷新上传带进度条
jQuery+php+ajax带进度条无刷新上传文件代码,支持图片、压缩包、视频等大文件上传。注:这里的演示因服务器权限限制,会上传失败。
查看演示 下载资源:6

手机扫码访问:

下载资源 下载积分:0

js代码

<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script> 
<script type='text/javascript' src='js/jquery.form.js'></script> 
<script type="text/javascript"> 
 function filesize(ele) {  
    var filesize = (ele.files[0].size / 1024/1024).toFixed(2);    
    $('#big').html(filesize+"MB"); 
    $('#text').html(ele.files[0].name); 
}   
$(document).ready(function(e) { 
   var progress = $(".progress");  
   var progress_bar = $(".progress-bar"); 
   var percent = $('.percent');  
    $("#del").click(function(){ 
    var objFile=document.getElementsByTagName('input')[2];   
     objFile.value="";  
     $("#list").hide(); 
    }); 
    $("#uploadphoto").change(function(){  
        $("#list").show(); 
    }); 
   $("#ups").click(function(){ 
   var file = $("#uploadphoto").val();  
   if(file!=""){    
     $('#uped').html("上传中……");    
       $("#myupload").ajaxSubmit({   
          dataType:  'json', //数据格式为json  
          beforeSend: function() { //开始上传   
              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;   
                $('#uped').html("上传成功");  
                //var attstr= '<img src="'+src+'">';   
                //$(".imglist").append(attstr); 
                //$(".res").html("上传图片"+data.name+"成功,图片大小:"+data.size+"K,文件地址:"+data.url); 
            }else{ 
                $(".res").html(data.content); 
            }      
          },  
          error:function(xhr){ //上传失败  
             alert("上传失败");   
          }          
      });  
    } 
    else{ 
     alert("请选择视频文件");   
    } 
   }); 
 
}); 
</script>


标签: 上传进度条
声明:转载请注明来源(PHP代码)并保留原文链接:http://www.phpdaima.com/upload-1031.html
广告不存在
评论0

后面还有条评论,点击查看>>

温馨提示:为规范评论内容,垃圾评论一律封号...

php+ajax无刷新上传带进度条
我的积分余额: 0.0 已下载次数: 6
所需积分:00 开始下载
×