仿微博风格的图片上传并实时显示实现（plupload，PHP），
没错，又是我，一只悲催的毕设咸鱼！这次实现的是微博发布动态时，选择图片上传按钮。按照惯例来个效果图。
这次使用了一个jquery插件plupload，具体的实现没有细究，拿过来直接就用了。上手还是很简单的，参考了几个博客就能实现基本功能了。微博的添加按钮是占据一个图片位置，每添加一个图片就向后移一位。注意：坑来了，使用这个插件的时候每次添加图片之后，添加的图片会处在之前添加按钮的位置，然后这个位置的图片点击之后也可以打开文件夹！简直惊了个呆，我尝试了各种方法都没有办法解决这个BUG（通过settings尝试重新绑定按钮/删除按钮，重新添加都没用），估计是DOM渲染问题。最后发现了官方的一个函数refresh()，作用如下：
Refreshes the upload instance by dispatching out a refresh event to all runtimes. This would for example reposition flash/silverlight shims on the page.
emmm……中文文档里看了好几个都写的是作用不明？？！
以后果然不能偷懒看中文文档，总之每次上传之后就刷新一下实例，BUG就解决了。如果有其他方法欢迎交流━(*｀∀´*)ノ亻!
接下来上代码，如果嫌弃太长的可以前往我的github下载：
upload.html
<!DOCTYPE html>
<html>
<head>
<title>仿微博动态图片上传</title>
<meta charset="utf-8">
<link href="http://cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/plupload/plupload.full.min.js"></script>
<style type="text/css">
#container {
position: relative;
}
#uploadBtn {
height: 2em;
background-color: #767997;
border: none;
outline: none;
color: white;
box-shadow: inset 2px 2px 2px #a9acca,
inset -2px -2px 2px #434664;
}
#pic-list {
list-style-type: none;
position: absolute;
border: 2px solid #767997;
padding: 5px;
display: none;
width: 315px;
}
#pic-list #triangle {
border: 10px solid #767997;
border-color: transparent transparent #767997 transparent;
position: absolute;
top: -20px;
left: 5px;
}
#pic-list #title {
padding-bottom: 5px;
}
#pic-list #title span {
font-weight: bold;
}
#pic-list #title b {
float: right;
}
#pic-list #title b:hover {
color: #434664;
}
#pic-list #title #hint {
color: #434664;
font-size: .7em;
padding-top: .7em;
}
#pic-list li {
position: relative;
display: inline-block;
float: left;
margin: 5px 5px 0px 0px;
font-size: 0px; /* 解决换行间隙问题 */
}
#pic-list li#addBtn {
box-sizing: border-box;
width: 100px;
height: 100px;
line-height: 90px;
border: 2px dashed #CCC;
color: #CCC;
font-size: 80px;
text-align: center;
padding-bottom: 30px;
}
#pic-list li img {
box-sizing: border-box;
width: 100px;
height: 100px;
border: 2px dashed #CCC;
}
#pic-list li:not(#addBtn):hover {
filter: alpha(Opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
#pic-list li#addBtn:hover {
border-color: #767997;
color: #767997;
}
#pic-list li b{
display: none;
position: absolute;
right: 0px;
top: 0px;
color: black;
font-size: 15px;
text-align: center;
}
#pic-list li:not(#addBtn):hover b {
display: block;
width: 20px;
height: 20px;
}
#pic-list li:not(#addBtn):hover b:hover {
background-color: #808080;
}
</style>
</head>
<body>
<div id="container">
<button type="button" id="uploadBtn"><i class="fa fa-picture-o" aria-hidden="true"></i> 图片 </button>
<ul id="pic-list">
<span id="triangle"></span>
<div id="title">
<span>本地上传</span><b onclick="delall()">X</b>
<div id="hint">共0张，还能上传9张</div>
</div>
<li id="addBtn">+</li>
</ul>
</div>
<script type="text/javascript">
$("#uploadBtn").click(function(event) {
if($("#pic-list").css("display") == "none") {
$("#addBtn").trigger('click');
}
});
var uploader = new plupload.Uploader({ // 创建实例的改造方法
runtimes: "html5, flash, silverlight, html4", // 上传插件初始化选用方法的优先级顺序
browse_button: "addBtn", // 上传按钮
url: "PHP/up_pics.php?get=upimg", // 远程上传处理地址
flash_swf_url: "js/plupload/Moxie.swf", // flash文件地址
silverlight_xap_url: "js/plupload/Moxie.xap", // silverlight文件地址
filters: {
max_file_size: "10mb", // 最大上传1文件大小(格式100b, 10kb, 10mb, 1gb)
mime_types: [ // 允许文件上传的类型
{title: "files", extensions: "jpg,png,gif"}
]
},
multipart_params: {}, // 文件上传附加参数
file_data_name: "file", // 文件上传名称
multi_selection: true, // true: 允许一次选择多个文件（ctrl）,false: 不允许
init: {
FilesAdded: function(up, files) { // 文件上传前
var recNum = $("#pic-list").children("li").length;
if(recNum>=10) {
alert("已上传9张图片！");
uploader.destroy();
console.log("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>";
recNum += 1;
if(recNum==10) return false;
});
$("#addBtn").before(li);
if($("#pic-list").css("display") == "none"){$("#pic-list").show();}
if(recNum>=10) {
$("#addBtn").css("display", "none");
}
uploader.start();
}
console.log("FilesAdded");
},
UploadProgress: function(up, file) { // 上传中，显示进度条
var percent = file.percent;
$("#"+file.id).find('.bar').css({"width": percent+'%'});
$("#"+file.id).find('.percent').text("上传中 "+percent+'%');
console.log("progress");
},
FileUploaded: function(up, file, info) { // 文件上传成功时触发
var data = JSON.parse(info.response);
$("#"+file.id).html("<img src='PHP/"+data.url+"'/><b onclick='delimg(this)'>x</b><input type='hidden' name='' value='PHP/"+data.url+"'>");
console.log("success");
uploader.refresh(); // 重新渲染DOM，避免在添加按钮原位置仍会响应打开文件夹
var recNum = $("#pic-list").children("li").length-1;
var hintText = "共"+recNum+"张，还能上传"+String(9-recNum)+"张";
$("#hint").text(hintText);
},
Error: function(up, err) { // 上传出错的时候触发
alert("error");
}
}
});
uploader.init();
function delimg(o) {
console.log("delete");
var src = $(o).prev().attr("src");
$.post('PHP/up_pics.php?get=delimg&imgurl='+src.substring(4), function(data) {
/*optional stuff to do after success */
if(data == 1) {
if ($("#pic-list").children("li").length==10) {
$("#addBtn").css("display", "block");
}
$(o).parent().remove();
var recNum = $("#pic-list").children("li").length-1;
var hintText = "共"+recNum+"张，还能上传"+String(9-recNum)+"张";
$("#hint").text(hintText);
}
else {
console.log(data);
}
});
}
function delall() {
$("#pic-list").hide();
$("#pic-list li").children("b").each(function(index, el) {
delimg(el);
});
}
</script>
</body>
</html>up_pics.php
<?php
$typeArr = array("jpg", "png", "gif"); // 允许文件上传格式
$path = "files/"; // 上传路径
if(!is_dir($path)) mkdir($path);
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"=>"您还未选择图片"), JSON_UNESCAPED_UNICODE );
exit;
}
$type = strtolower(substr(strrchr($name, '.'), 1)); // 获取文件类型
if(!in_array($type, $typeArr)) {
echo json_encode(array("error"=>"请上传jpg, png或gif类型的图片！"), JSON_UNESCAPED_UNICODE );
}
if($size>(1024*1024*10)) {
echo json_encode(array("error"=>"图片大小已超过10MB！"), JSON_UNESCAPED_UNICODE );
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", "url"=>$pic_url, "name"=>$pic_name), JSON_UNESCAPED_UNICODE );
} else {
echo json_encode(array("error"=>"上传有误，请检查服务器配置！"), JSON_UNESCAPED_UNICODE );
}
}
}
if($_GET['get'] == 'delimg') {
$imgsrc = $_GET['imgurl'];
unlink($imgsrc);
echo 1;
}
?>参考
[1] 我的代码github地址
[2] JS插件实现多图上传并显示进度条加删除实例
[3] 官方文档
PHP之友评论