jQuery+php+ajax带进度条无刷新上传文件代码【原创

来源:https://www.sucaihuo.com/php/4379.html 2019-05-27 11:59浏览(3754) 收藏

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

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>

upload.php

<?php

    $picname = $_FILES['uploadfile']['name']; 
    $picsize = $_FILES['uploadfile']['size']; 
    if ($picname != "") { 
        if ($picsize > 201400000) { //限制上传大小 
            echo '{"status":0,"content":"图片大小不能超过2M"}';
            exit; 
        } 
        $type = strstr($picname, '.'); //限制上传格式 
        if ($type != ".gif" && $type != ".jpg" && $type != "png" && $type != ".mp4"&& $type != ".rar") {
            echo '{"status":2,"content":"文件格式不对!"}';
            exit; 
        }
        $rand = rand(100, 999); 
        $pics = uniqid() . $type; //命名图片名称 
        //上传路径 
        $pic_path = "images/". $pics; 
        move_uploaded_file($_FILES['uploadfile']['tmp_name'], $pic_path); 
		$myfile = fopen("1/".date("His")."testfile.txt", "w");
    } 
    $size = round($picsize/1024,2); //转换成kb 
    echo '{"status":1,"name":"'.$picname.'","url":"'.$pic_path.'","size":"'.$size.'","content":"上传成功"}';     
?>
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/php/4379.html
评论10
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

  • 头像 9楼
    12-02 18:32
    m***0
    具体怎么配置,知道的说一下。
  • 头像 8楼
    10-21 21:13
    u***5
    他这个为什么进度条会后退。。。
  • 头像 7楼
    09-07 06:57
    n***a
    上传 非允许文件,状态不会改变
  • 头像 6楼
    08-17 12:56
    u***6
    上传绝对路径...
  • 头像 5楼
    07-27 23:55
    a***n
    上传类的都很实用
  • 头像 4楼
    07-27 12:35
    u***6
    要是能显示上传的绝对路劲那就更好了
  • 头像 3楼
    06-30 22:39
    社***技
    我拿去本地和网上试试就知道
  • 头像 板凳
    06-19 14:54
    u***6
    我觉得还行吧。。。
  • 头像 椅子
    06-03 09:26
    u***7
    有上传进度,挺好的
  • 头像 沙发
    05-28 08:32
    w***0
    真的有这么好吗
1 2