tp5 多图上传(适应h5、flash，多图上传)

这是一款非常好用的tp5的上传图片。话不多说直接上代码

首先引进js：

<script type="text/javascript" src="js/plupload/plupload.full.min.js"></script>

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

html代码:

<li>
  	<a href="javascript:;">
          <img src="{$default_path}/images/icon8.png" alt="">图片
          <input type="file" name="pic"  id="fbtp"  class="fbtp">
        </a>
 </li>

js实现代码:

var uploader = new plupload.Uploader({
            runtimes: "html5,flash,silverlight,html4",
            browse_button: "upload",
            url: "{:url("/wap/index/remarktp")}",
            flash_swf_url: "__STATIC__/wap/js/plupload/Moxie.swf",
            silverlight_xap_url: "__STATIC__/wap/js/plupload/Moxie.xap",
            filters: {
                max_file_size: "5000kb",
                mime_types: [{
                    title: "files",
                    extensions: "jpg,png,gif,jpeg,mp4,PNG,JPG,JPEG,GIF,MP4"
                }]
            },
            multi_selection: true,
            init: {
                
                FilesAdded: function(up, files) {
                    //判断上传图片不能超过9张
                    var count = files.length;
                    if (count>9){
                        alert("最多上传9张图片!");
                        uploader.files.splice(uploader.files.length-files.length, files.length);
                        uploader.stop();
                        return false;
                    }else{
                        var li = "";
                        li = "<li class="remark_pic"></li>";
                        $("#remark_pic").append(li);
                        uploader.start();
                    }
                },
                UploadProgress: function(up, file) {
                    // layer.load();
                },
                FileUploaded: function(up, file, info) {
                    var data = eval("(" + info.response + ")");
                   
                    $(".OdPopLayer_fbword").addClass("show");
                    
                     $(".remark_pic").append("<li class="pic_list" style="width:98px;margin:4px 4px 0 0;float:left; cursor:pointer" id=""+ data.id +""><a data-val=""+data.id+"" onclick="qxsc("+data.id+")" class="pic_delete" style="float:left;margin-left:79px;display:inline-block;position:absolute; cursor:pointer"><img src="{$default_path}/images/close.png"></a><div id=""+data.id +"" style="background:url(" + data.pic + ") no-repeat center center;height: 98px;background-size: cover!important;"></div><input  class="filename" id="i" + data.id + "" type="hidden" name="art_img_more[]" value="" + data.pic + ""/></li>");
                },
                Error: function(up, err) {
                    layer.close(layer.load());
                    alert("上传图片过大或图片格式不对,请重新上传!");
                    uploader.files.splice(uploader.files.length-files.length, files.length);
                }
            }
        });
        uploader.init();
            //移除图片
            $(document).on("click",".pic_list a.pic_delete",function(){
                
            $(this).parent().remove();
            var toremove = "";
            var id=$(this).attr("data-val");
            for(var i in uploader.files){
            if(uploader.files[i].id === id){
            toremove = i;
             }
            }
            uploader.files.splice(toremove, 1);  
            console.log("XXX"+$(this).attr("data-val"));

            var abc=$("#remark_p").find("li").length;
            if(abc<1){
                $("#P_ImgBtn").removeClass("show");
            }

            });

php的方法: 

 

public function upload(){
        $file = request()->file("file");
        $info = $file->move(ROOT_PATH . "public" . DS . "uploads". DS ."avatar");
        if($info){
            echo json_encode(array("error"=>"0","pic"=>DS ."public" . DS ."uploads". DS ."avatar". DS .$info->getSaveName(),"name"=>$info->getFilename()));
        }else{
            echo $file->getError();
        }
    }

直接把这些代码放进去就可以了