PHP + plupload.js实现多图上传并显示进度条加删除实例代码
更新时间：2017年03月06日 15:21:00 作者：神夜大侠
本篇文章主要介绍了PHP + plupload.js实现多图上传并显示进度条加删除实例代码。具有一定的参考价值，有兴趣的可以了解一下。
PHP + plupload.js JS插件实现多图上传并显示进度条加删除实例，废话不多说，直接上代码
HTML代码：
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>多图上传</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="plupload.full.min.js"></script>
</head>
<body>
<style type="text/css">
*{ margin:0px; padding:0px; font-family:Microsoft Yahei; box-sizing:border-box; -webkit-box-sizing:border-box;}
.demo{max-width:640px; margin:0 auto; min-width:320px;}
.ul_pics{ float:left;}
.ul_pics li{float:left; margin:0px; padding:0px; margin-left:5px; margin-top:5px; position:relative; list-style-type:none; border:1px solid #eee; width:80px; height:80px;}
.ul_pics li img{width:80px;height:80px;}
.ul_pics li i{ position:absolute; top:0px; right:-1px; background:red; cursor:pointer; font-style:normal; font-size:10px; width:14px; height:14px; text-align:center; line-height:12px; color:#fff;}
.progress{position:relative; margin-top:30px; background:#eee;}
.bar {background-color: green; display:block; width:0%; height:15px; }
.percent{position:absolute; height:15px; top:-18px; text-align:center; display:inline-block; left:0px; width:80px; color:#666; line-height:15px; font-size:12px; }
.demo #btn{ width:80px; height:80px; margin-left:5px; margin-top:5px; border:1px dotted #c2c2c2; background:url(up.png) no-repeat center; background-size:30px auto; text-align:center; line-height:120px; font-size:30px; color:#666; float:left;}
</style>
<div class="demo">
<a href="javascript:void(0)" rel="external nofollow" id="btn"></a>
<ul id="ul_pics" class="ul_pics clearfix">
</ul>
</div>
<script type="text/javascript">
var uploader = new plupload.Uploader({ //创建实例的构造方法
runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
browse_button: 'btn', // 上传按钮
url: "upimgs.php?get=upimg", //远程上传地址
flash_swf_url: 'plupload/Moxie.swf', //flash文件地址
silverlight_xap_url: 'plupload/Moxie.xap', //silverlight文件地址
filters: {
max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [ //允许文件上传类型
{title: "files", extensions: "jpg,png,gif"}
]
},
multipart_params:{ }, //文件上传附加参数
file_data_name:"upimg", //文件上传的名称
multi_selection: false, //true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
if ($("#ul_pics").children("li").length > 5) {
alert("您上传的图片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files, function(file) { //遍历文件
li += "<li id='" + file['id'] + "'><div class='progress'><span class='bar'></span><span class='percent'>上传中 0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) { //上传中，显示进度条
var percent = file.percent;
$("#" + file.id).find('.bar').css({"width": percent + "%"});
$("#" + file.id).find(".percent").text("上传中 "+percent + "%");
},
FileUploaded: function(up, file, info) { //文件上传成功的时候触发
var data = eval("(" + info.response + ")");
$("#" + file.id).html("<img src='" + this.url + "'/><i onclick='delimg(this)'>x</i><input type='hidden' name='' value='"+ this.url +"'>");
},
Error: function(up, err) { //上传出错的时候触发
alert("error");
}
}
});
uploader.init();
function delimg(o){
var src = $(o).prev().attr("src");
$.post("upimgs.php?get=delimg&imgurl="+src,function(data){
if(data==1){
$(o).parent().remove();
}
})
}
</script>
</body>
</html>
PHP 代码：
<?php
$typeArr = array("jpg", "png", "gif");//允许上传文件格式
$path = "files/";//上传路径
if (isset($_POST)) {
if($_GET['get']=="upimg"){
$name = $_FILES['file']['name'];
$size = $_FILES['file']['size'];
$name_tmp = $_FILES['file']['tmp_name'];
if (empty($name)) {
echo json_encode(array("error"=>"您还未选择图片"));
exit;
}
$type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型
if (!in_array($type, $typeArr)) {
echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));
exit;
}
if ($size > (1024 * 1024 * 10)) {
echo json_encode(array("error"=>"图片大小已超过10MB！"));
exit;
}
$pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称
$pic_url = $path . $pic_name;//上传后图片路径+名称
if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
echo json_encode(array("error"=>"0","pic"=>$pic_url,"name"=>$pic_name));
} else {
echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));
}
}
if($_GET['get']=="delimg"){
$imgsrc = $_GET['imgurl'];
unlink($imgsrc);
echo 1;
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了PHP+Ajax实现上传文件进度条动态显示进度功能，通过ajax实现主界面，php处理上传文件，具体实例代码大家跟随脚本之家小编一起看看吧2018-06-06![100多行PHP代码实现socks5代理服务器[2]](//img.jbzj.com/images/xgimg/bcimg1.png)
这篇文章主要介绍了100多行PHP代码实现socks5代理服务器,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了php对微信支付回调处理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了PHP论坛实现积分系统的思路,本文通过实例代码给大家介绍的非常详细，文中通过代码给大家补充介绍了thinkphp删除图片的方法实现代码，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Joomla简单判断用户是否登录的方法,涉及Joomla基于服务器端变量结合Joomla文件进行判断与跳转的相关技巧,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了Yii2 输出xml格式数据的方法的相关资料,小编感觉非常具有参考价值，特此分享到脚本之家平台，供大家参考2016-05-05
这篇文章主要给大家介绍了关于Laravel多用户认证系统的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
使用php get_headers 判断URL是否有效的解决办法
本篇文章介绍了，使用php get_headers 判断URL是否有效的解决办法。需要的朋友参考下2013-04-04
CodeIgniter配置之config.php用法实例分析
这篇文章主要介绍了CodeIgniter配置之config.php用法,结合实例形式详细的分析了CodeIgniter中配置文件config.php的参数含义及具体使用技巧,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了Laravel 5.1 框架Blade模板引擎用法,结合实例形式分析了laravel5.1框架Blade模板引擎基本功能、创建、使用方法及相关操作注意事项,需要的朋友可以参考下2020-01-01
![100多行PHP代码实现socks5代理服务器[2]](http://img.jbzj.com/images/xgimg/bcimg1.png)
最新评论