<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);
}
}

Plupload 多实例上传 测试可用的更多相关文章

  1. Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮--推荐使用

    今天帮朋友解决  Plupload  上传的问题,查了很多资料,资料还是挺全的,但是有点零零散散的,故整理好,合并发出来. 本教程包括: Plupload  上传详细讲. Plupload  多实例上 ...

  2. 通过ALM OTA API获取test case的信息,并上传测试结果到test set中

    ALM提供了OTA接口,可以用来获取和上传测试数据到ALM.比如获取Test case的step信息.上传测试结果到test instance. 在ALM的Help中可以下载相关文档,这里以ALM11 ...

  3. PHP+Ajax+plupload无刷新上传头像代码

    很简单的一款PHP+Ajax+plupload无刷新上传头像代码,兼容性很好,可以直接拿来用.你可以自定义各种类型的文件.本实例中只能上传"jpg", "png" ...

  4. 【技术博客】 关于laravel5.1中文件上传测试的若干尝试

    关于laravel5.1中文件上传测试的若干尝试 作者:ZGJ 版本:v1.0 PM注:本人这两天也正在尝试解决这一问题,如有进展将及时更新这一博客 在我们的软工第二阶段中,我开始着手进行后端控制器的 ...

  5. 分布式文件系统 - FastDFS 配置 Nginx 模块及上传测试

    也不说废话,直接干 上一篇 分布式文件系统 - FastDFS 在 CentOS 下配置安装部署 中安装了 FastDFS 后,并配置启动了 Tracker 和 Storage 服务,已经可以上传文件 ...

  6. 【技术博客】Postman接口测试教程 - 环境、附加验证、文件上传测试

    Postman接口测试教程 - 环境.附加验证.文件上传测试 v1.0 作者:ZBW 前言 继利用Postman和Jmeter进行接口性能测试之后,我们发现Postman作为一款入门容易的工具,其内置 ...

  7. OneNET麒麟座应用开发之四:数据上传测试

    已经测试过OneNET麒麟座开发板了,这次来尝试与OneNET的连接和数据上传.这也是我们测试这块开发办的主要原因,因为在十几种我们有这种将分散的采集点数据上传到后台的需求. 先看看麒麟座这块开发板, ...

  8. angularjs结合plupload实现文件上传

    转载注明:(罗志强的博客) angularjs的指令directive非常好使,可以很方便的结合各种插件,实现很强大的功能. 今天用到了plupload,就拿它举例吧. 正常的plupload用法应该 ...

  9. plupload如何限制上传文件数量,限制只能上传单个文件

    1 完整代码 $(function() { $("#uploader").pluploadQueue({ runtimes : 'html5,gears,flash,silverl ...

随机推荐

  1. MySQL的WHERE语句中BETWEEN与IN的用法和他们的区别

    MySQL BETWEEN 用法 not可以对between...and取反. 1.数值型 BETWEEN 运算符用于 WHERE 表达式中,选取介于两个值之间的数据范围.BETWEEN 同 AND ...

  2. 【转】Vim自动补全插件----YouCompleteMe安装与配置

    原文网址:http://www.cnblogs.com/zhongcq/p/3630047.html 使用Vim编写程序少不了使用自动补全插件,在Linux下有没有类似VS中的Visual Assis ...

  3. 黄聪:wordpress向mysql字段中保存html代码(使用add_option()方法),然后无法显示出问题

    你可以把" 引号去掉了再进库,或者使用 stripslashes_deep() <?php $str = "Is your name O\'reilly?"; // ...

  4. MySQL 高性能存储引擎:TokuDB初探

    在安装MariaDB的时候了解到代替InnoDB的TokuDB,看简介非常的棒,这里对ToduDB做一个初步的整理,使用后再做更多的分享. 什么是TokuDB? 在MySQL最流行的支持全事务的引擎为 ...

  5. 学习笔记之SQL / MySQL

    SQL Fiddle(在线执行SQL语句的网站) http://www.sqlfiddle.com/ MySQL https://www.mysql.com/ MySQL :: MySQL 5.7 R ...

  6. 如何制作简单的 3D 打印模型

    Hi 大家好! 了解一个方兴未艾,但极为有趣的话题 — 3D 打印 . 为了帮助大家对3D打印有一个初步的感性认识,我在线制作了一款可用于3D打印的model, 大家可以先通过体验这个在线 model ...

  7. php时间轴函数,很不错,记下了

    function TranTime($time) { //$time = strtotime($time); $nowTime = time (); $message = ''; if(empty($ ...

  8. C# DataTable添加行和列

    方法一: DataTable tblDatas = new DataTable("Datas"); DataColumn dc = null; dc = tblDatas.Colu ...

  9. Oracle数据库备份与恢复的三种方法

    转自blueskys567原文Oracle数据库备份与恢复的三种方法, 2006-10. 有删改 Oracle数据库有三种标准的备份方法,它们分别是导出/导入(EXP/IMP).热备份和冷备份. 导出 ...

  10. leetcode203

    /** * Definition for singly-linked list. * public class ListNode { * public int val; * public ListNo ...