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

最新推荐文章于 2020-12-08 17:54:28 发布

King女王

最新推荐文章于 2020-12-08 17:54:28 发布

阅读量3k

点赞数 1

分类专栏： TP5 文章标签：上传图片 TP5多图上传 plupload

本文链接：https://blog.csdn.net/qq_18976087/article/details/79013099

版权

TP5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这是一款非常好用的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+"' οnclick='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();
        }
    }

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