网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
今天,帝国模板之家小编给大家分享一个很好用的文件上传插件,使用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":"上传成功"}';
?>
效果图如下:
以上就是jQuery+php+ajax无刷新带进度条上传文件代码,大家赶紧测试一下吧,更多好用的网站功能请关注帝国模板之家。
转载请注明来源:jQuery+php+ajax无刷新带进度条上传文件代码
本文永久链接地址:https://www.moyouyouw.cn/code/415.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论