jQuery+php+ajax实现无刷新上传文件功能，还带有上传进度条动画效果，支持图片、视频等大文件上传。
js代码
1 <script type='text/javascript' src='js/jquery-2.0.3.min.js'></script> 2 <script type='text/javascript' src='js/jquery.form.js'></script> 3 <script type="text/javascript"> 4 function filesize(ele) { 5 var filesize = (ele.files[0].size / 1024/1024).toFixed(2); 6 $('#big').html(filesize+"MB"); 7 $('#text').html(ele.files[0].name); 8 } 9 $(document).ready(function(e) { 10 var progress = $(".progress"); 11 var progress_bar = $(".progress-bar"); 12 var percent = $('.percent'); 13 $("#del").click(function(){ 14 var objFile=document.getElementsByTagName('input')[2]; 15 objFile.value=""; 16 $("#list").hide(); 17 }); 18 $("#uploadphoto").change(function(){ 19 $("#list").show(); 20 }); 21 $("#ups").click(function(){ 22 var file = $("#uploadphoto").val(); 23 if(file!=""){ 24 $('#uped').html("上传中……"); 25 $("#myupload").ajaxSubmit({ 26 dataType: 'json', //数据格式为json 27 beforeSend: function() { //开始上传 28 var percentVal = '0%'; 29 progress_bar.width(percentVal); 30 percent.html(percentVal); 31 }, 32 uploadProgress: function(event, position, total, percentComplete) { 33 var percentVal = percentComplete + '%'; //获得进度 34 progress_bar.width(percentVal); //上传进度条宽度变宽 35 percent.html(percentVal); //显示上传进度百分比 36 }, 37 success: function(data) { 38 if(data.status == 1){ 39 var src = data.url; 40 $('#uped').html("上传成功"); 41 //var attstr= '<img src="'+src+'">'; 42 //$(".imglist").append(attstr); 43 //$(".res").html("上传图片"+data.name+"成功，图片大小："+data.size+"K,文件地址："+data.url); 44 }else{ 45 $(".res").html(data.content); 46 } 47 }, 48 error:function(xhr){ //上传失败 49 alert("上传失败"); 50 } 51 }); 52 } 53 else{ 54 alert("请选择视频文件"); 55 } 56 }); 57 58 }); 59 </script>
upload.php源代码
1 <?php 2 3 $picname = $_FILES['uploadfile']['name']; 4 $picsize = $_FILES['uploadfile']['size']; 5 if ($picname != "") { 6 if ($picsize > 201400000) { //限制上传大小 7 echo '{"status":0,"content":"图片大小不能超过2M"}'; 8 exit; 9 } 10 $type = strstr($picname, '.'); //限制上传格式 11 if ($type != ".gif" && $type != ".jpg" && $type != "png" && $type != ".mp4"&& $type != ".rar") { 12 echo '{"status":2,"content":"文件格式不对！"}'; 13 exit; 14 } 15 $rand = rand(100, 999); 16 $pics = uniqid() . $type; //命名图片名称 17 //上传路径 18 $pic_path = "images/". $pics; 19 move_uploaded_file($_FILES['uploadfile']['tmp_name'], $pic_path); 20 $myfile = fopen("1/".date("His")."testfile.txt", "w"); 21 } 22 $size = round($picsize/1024,2); //转换成kb 23 echo '{"status":1,"name":"'.$picname.'","url":"'.$pic_path.'","size":"'.$size.'","content":"上传成功"}'; 24 ?>
本文转自https://www.sucaihuo.com/php/4379.html，转载请注明出处！