<style type="text/css">
.btn{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;
font-weight:bold;">#ff8400;color: #fff;display: inline-block;height: 28px;line-height: 28px;text-align: center;
width: 72px;transition: background-color 0.2s linear 0s;border:none;cursor:pointer;margin:0 0 20px;}
a{cursor: pointer}
.btn:hover{font-weight:bold;">#e95a00;text-decoration: none}
ul,li{list-style: none;padding:0;margin:0}
.ul_pics{float:left}
/*******图片样式*********/
.ul_pics li{float:left;width:120px;height:120px;border:1px solid #ddd;margin:0 5px 10px}
.progress{position:relative;padding: 1px; border-radius:3px; margin:60px 0 0 0;}
.bar {font-weight:bold;">green; display:block; width:0%; height:20px; border-radius:3px; }
.percent{position:absolute; height:20px; display:inline-block;top:3px; left:2%; color:#fff }
.clearfix:after{visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0}
*:first-child+html .clearfix{zoom:1}
.img_common{width:100%;height: 100%}
</style>
<tr>
<th><label for="">缩略图</label></th>
<td>
<div class="demo clearfix">
<ul id="slt_ul_pics" class="ul_pics clearfix">
<li><img src="./source/modules/myvote/plupload/logo.png" id="slt_btn" class="img_common" /></li>
</ul>
</div>
</td>
</tr>
<tr>
<th><label for="">头部图片</label></th>
<td>
<div class="demo clearfix">
<ul id="top_ul_pics" class="ul_pics clearfix">
<li><img src="./source/modules/myvote/plupload/logo.png" id="top_btn" class="img_common" /></li>
</ul>
</div>
</td>
</tr>
<script type="text/javascript" src="./source/modules/myvote/plupload/plupload.full.min.js"></script>
<script type="text/javascript"> var ids = new Array("slt","top");//多实例上传按钮
$.each(ids,function(i,n){
var self = this.toString();
var bs=self+"_btn";
if(bs=='slt_btn'){
var more=false;
var num=1;
}else{
var more=true;
var num=30;
}
var uploader = new plupload.Uploader({//创建实例的构造方法
runtimes: 'html5,flash,silverlight,html4', //上传插件初始化选用那种方式的优先级顺序
// browse_button: 'btn', // 上传按钮
browse_button : self+"_btn",
url: "{php echo create_url('site/module/uploads', array('name' => 'myvote', 'op' => 'up'));}", //远程上传地址
flash_swf_url: './source/modules/myvote/plupload/Moxie.swf', //flash文件地址
silverlight_xap_url: './source/modules/myvote/plupload/Moxie.xap', //silverlight文件地址
filters: {
max_file_size: '10mb', //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
mime_types: [//允许文件上传类型
{title: "files", extensions: "jpg,png,gif,jpeg"}
]
},
multi_selection: more, //true:ctrl多文件上传, false 单文件上传
init: {
FilesAdded: function(up, files) { //文件上传前
if ($("#"+self+"_ul_pics").children("li").length > num) {
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>";
});
$("#"+self+"_ul_pics").prepend(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 + ")");//解析返回的json数据
$("#" + file.id).html("<input type='hidden'name='pic[]' value='" + data.pic + "'/><input type='hidden'name='pic_name[]' value='" + data.name_new + "'/><img class='img_common' onclick=delPic('" + data.pic + "','" + file.id + "') src='" + data.pic + "'/>");//追加图片
},
Error: function(up, err) { //上传出错的时候触发
alert(err.message);
}
}
});
uploader.init();
}); function delPic(pic, file_id) { //删除图片 参数1图片路径 参数2 随机数
if (confirm("确定要删除吗？")) {
$.post("{php echo create_url('site/module/uploads', array('name' => 'myvote', 'op' => 'del', 'pic' => '"+pic+"'));}", {pic: pic}, function(data) {
$("#" + file_id).remove()
})
}
}
</script>
php处理
//图片上传
public function doWebUploads(){
global $_W;
global $_GPC; // 获取query string中的参数
$operation = !empty($_GPC['op']) ? $_GPC['op'] : 'up';
if($operation=='up') {
$typeArr = array("jpg", "png", "gif", "jpeg"); //允许上传文件格式
$path = "uploads/"; //上传路径
if (isset($_POST)) {
$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 > (50000 * 1024)) { //上传大小
echo json_encode(array("error" => "图片大小已超过50000KB！"));
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" => "上传有误，清检查服务器配置！"));
}
}
}else if($operation=='del'){
$pic = $_GPC['pic'];
unlink($pic);
}
}