当前位置：首页 > 资源 > 网页特效 > 正文

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

帝国模板之家 2020-09-02 网页特效 ℃ 评论

今天，帝国模板之家小编给大家分享一个很好用的文件上传插件，使用jQuery+php+ajax实现无刷新，待上传进度条，支持支持图片、压缩包、视频等大文件上传（大文件上传需要配置服务器，之前有介绍帝国cms大文件上传配置，大家可以参考一下）。具体实现代码如下：

前端文件：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>php-ajax无刷新上传(带进度条)demo</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width , initial-scale=1.0 , user-scalable=0 , minimum-scale=1.0 , maximum-scale=1.0" />
<script type='text/javascript' src='js/jquery-2.0.3.min.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>
<link href="css/upload.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="upload">
注意：<br>
1.上传的视频文件单文件不能超过4G；<br>
2.上传的视频格式必须*.mp4 *.rar。
</div>

<div id="upbt">
<div id="btn"><input type="button" class="uploadbtn" value="选择文件" onClick="uploadphoto.click()" id="select"><input type="button"   value="开始上传"  id="ups"></div>
</div>
<div style="width:940px;margin:10px auto;   overflow:hidden; margin-top:10px;">
  <form id='myupload' action='upload.php' method='post' enctype='multipart/form-data'>
    <input type="file" id="uploadphoto"  name="uploadfile" value="请点击上传图片" style="display:none" onChange="filesize(this)" />
  </form> 
  
<table width="100%" border="0" id="table" cellpadding="1" cellspacing="1">
  <tr bgcolor="#4a5464" align="center" >
    <td width="27%">文件名</td>
    <td width="17%">文件大小</td>
    <td width="30%">上传进度</td>
    <td width="12%">上传状态</td>
    <td width="14%">操作</td> 
  </tr> 
  <tr id="list" style="background:url(css/bg.jpg); display:none;">
    <td><div id="text"></div></td>
    <td><div id="big"></div></td>
    <td><div class="progress">
    <div class="progress-bar progress-bar-striped" ><span class="percent">0%</span></div>
  </div> </td>
    <td><div id="uped">等待上传</div></td>
    <td><a href="javascript:viod(0)" id="del">移除</a></td> 
  </tr> 
</table> 
  <!--<div id="text"></div> 
  <div class="imglist"> </div>
  <p class="res"></p> -->
</div>
<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>
</body>
</html>

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":"上传成功"}';     
?>

效果图如下：