zoukankan      html  css  js  c++  java
  • thinkphp 多图片上传 单图片上传

    不管是单图片上传还是多图片上传都必须要引用这两个js

    下载地址

    链接:http://pan.baidu.com/s/1eStkUt0 密码:asvo

    <script src="Public/static/plupload-2.1.9/plupload.full.min.js"></script>
     <script src="Public/static/plupload-2.1.9/i18n/zh_CN.js"></script>

    多图片上传

    多图上传css样式

         .controls{overflow: hidden;}
            .tuji{ margin: 10px 0; padding: 0; float: left;}
            .tuji li{ width: 100px; height: 100px; float: left; margin: 0 2px; list-style-type: none; position: relative}
            .tuji li img.img{ width: 100%; height: 100%;}
            .tuji li img.ico{ position: absolute; top: -5px; right: -5px; cursor: pointer; width: 20px; height: 20px;}
            #logo{cursor: pointer; width: 100px; height: 100px;  margin: 10px;}

    HTML模板

                          <div class="form-group">
                                                <label class="control-label"> 商品宣传图 <span class="check-tips"></span></label>
                                                <div class="controls">
                                                    <img src="/Public/Liu/images/jia.png" id="logo" >
                                                    <ul class="tuji">
                                                        <if condition="$info['images'][0] neq '' ">
                                                            <volist name="info['images']" id="vo">
                                                            <li>
                                                                <img class="img" src="{$vo}">
                                                                <img class="ico" onclick="del_func(this)" src="/Public/Liu/images/cha.png" />
                                                                <input type="hidden" name="images[]" value="{$vo}">
                                                            </li>
                                                            </volist>
                                                        </if>
                                                    </ul>
                                                </div>
                                            </div>

    js代码

     <script>
    
            var uploader = new plupload.Uploader({
                "runtimes":"html5,flash,silverlight,html4",
                "flash_swf_url" : "/Public/static/plupload-2.1.9/Moxie.swf",
                "silverlight_xap_url" : "/Public/static/plupload-2.1.9/Moxie.xap",
                "browse_button":$("#logo")[0],//点击触发事件
                "url":"{:U('Fileupload/img_upload')}",//控制器地址
                "filters" : {
                    max_file_size : '3M',
                    mime_types: [
                        {title : "Image files", extensions : "jpg,gif,png,jpeg"}
                    ]
                },
                "multi_selection":false,// 多选
                "multipart_params":{"dir":"pic"},
    
                init:{
    
                    FilesAdded: function(up, files) {
    
                        this.start();
                    },
                    FileUploaded:function(up,files,res){
                        var data = $.parseJSON(res.response);
                        var html = $('.tuji').html();
                        if(data.status == 1){
                            html += '<li><img class="img" src="'+data.data+'">';
                            html += '<img class="ico" onclick="del_func(this)" src="/Public/Liu/images/cha.png">';
                            html += '<input type="hidden" name="images[]" value="'+data.data+'"></li>';
    
                            $('.tuji').html(html);
                        }
                    },
                    Error:function(up,err){
                        alert(err.message);
    
                    }
                }
            });
            uploader.init();
        </script>
        <script>
            function del_func(dom){
                        $(dom).parent('li').remove();
            }
        </script>

    单图片上传

    HTML模板

                           <div class="form-group">
                                                <label class="control-label"> 尾部显示图 <span class="symbol required"></span> <span class="check-tips"></span></label>
                                                <div class="controls">
                                                <if condition="$info['bjt_2'] eq ''">
                                                   <img src="Public/Home/images/jia.png" id="bjt_2" class="ks_img">
                                                   <input type="hidden" name="bjt_2" value="" id="yci_2">
                                               <else/>
                                                   <img src="{$info['bjt_2']}" id="bjt_1" class="ks_img">
                                                   <input type="hidden" name="bjt_2" value="{$info['bjt_2']}" id="yci_1">
                                                </if>
                                                </div>
                                            </div>

    js 代码

    <script>
    
          var uploader = new plupload.Uploader({
                "runtimes":"html5,flash,silverlight,html4",
                "flash_swf_url" : "/Public/static/plupload-2.1.9/Moxie.swf",
                "silverlight_xap_url" : "/Public/static/plupload-2.1.9/Moxie.xap",
                "browse_button":$("#bjt_2")[0],//点击触发事件
                "url":"{:U('Fileupload/img_upload')}",//控制器地址
                "filters" : {
                    max_file_size : '3M',
                    mime_types: [
                        {title : "Image files", extensions : "jpg,gif,png,jpeg"}
                    ]
                },
                "multi_selection":false,// 多选
                "multipart_params":{"dir":"pic"},
    
                init:{
    
                    FilesAdded: function(up, files) {
    
                        this.start();
                    },
                    FileUploaded:function(up,files,res){
                        var data = $.parseJSON(res.response);
                        var html = $('.controls').html();
                    if(data.status == 1){
                        $('#bjt_2').attr('src',data.data);
                        $('#yci_2').val(data.data);
                        /*html += '<img class="img" src="'+data.data+'">';
                        html += '<img class="ico" onclick="del_func(this)" src="Public/Home/images/del_btn.png">';
                        html += '<input type="hidden" name="images[]" value="'+data.data+'">';*/
                        
    
    //                    $('.controls').html(html);
                    }
                    },
                    Error:function(up,err){
                        alert(err.message);
    
                    }
                }
            });
            uploader.init();
        </script>
  • 相关阅读:
    Can't remove netstandard folder from output path (.net standard)
    website项目的reference问题
    The type exists in both DLLs
    git常用配置
    Map dependencies with code maps
    How to check HTML version of any website
    Bootstrap UI 编辑器
    网上职位要求对照
    Use of implicitly declared global variable
    ResolveUrl in external JavaScript file in asp.net project
  • 原文地址:https://www.cnblogs.com/zc290987034/p/7717526.html
Copyright © 2011-2022 走看看