Plupload 多实例上传 测试可用

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