jili2/application/h5/view/common/upimg.html

<link rel="stylesheet" href="/static/jqueryFileUpload/style.css">
<script src="/static/jqueryFileUpload/jquery.ui.widget.js"></script>
<script src="/static/jqueryFileUpload/jquery.iframe-transport.js"></script>
<script src="/static/jqueryFileUpload/jquery.fileupload.js"></script>
<script src="/static/ddsort/ddsort.min.js"></script>
<div>
    <a href="javascript:;" class="btn btn-primary btn-sm jqfivefile" type="button">
        <span id="imgUpload_name_{$name}n2">上传图片</span><span id="progress_{$name}n2"></span>
        <input id="imgUpload_{$name}n2" name="files" type="file" title="上传图片" accept="image/*" data-url="{:url('File/upimg')}" />
    </a>
    <div id="imgsbox_{$name}n2" class="imgsbox">

    </div>

    {if condition="!isset($type) || $type eq 0")}
    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 仅支持.jpg.jpeg.png后缀的图片;文件大小不超过5M。</span>
    {/if}
</div>

<script>
    $(function(){
        var imgs = '{$val}';
        var multi = parseInt('{$multi}');
        var name = "{$name}";
        imgs = imgs?imgs.split(','):[];
        var maxfiles = parseInt(<?php echo isset($max)?$max:20;?>);

        let initstr = '';
        for (let i in imgs){
            initstr += '<div class="imgbox">';
            initstr += '<div class="removePic" ontouchstart="removePic(this)">×</div>';
            if(multi){
                initstr += '<input type="hidden" name="'+name+'[]" value="' + imgs[i] + '">';

            }else{
                initstr += '<input type="hidden" name="'+name+'" value="' + imgs[i] + '">';
            }
            initstr += '<img onclick="open_img(this)" src="' + imgs[i] + '">';
            initstr += '</div>';
        }
        if(multi){
            $("#imgsbox_{$name}n2").append(initstr);
        }else{
            $("#imgsbox_{$name}n2").html(initstr);
        }

        if(multi){
            name = name+'[]';
            $("#imgUpload_{$name}n2").attr('multiple','multiple');
        }else{
            $("#imgUpload_{$name}n2").removeAttr('multiple');
        }
        $("#imgUpload_{$name}n2").fileupload({
            dataType: 'json',
            done: function (e, data) {
                if (data.result && data.result.code == 0) {
                    var img = '<div class="imgbox">';
                    img += '<div class="removePic" ontouchstart="removePic(this)">×</div>';
                    img += '<input type="hidden" name="'+name+'" value="' + data.result.data.path + '">';
                    img += '<img onclick="open_img(this)" src="' + data.result.data.path + '">';
                    img += '</div>';
                    if(multi){
                        $("#imgsbox_{$name}n2").append(img);
                    }else{
                        $("#imgsbox_{$name}n2").html(img);
                    }
                } else {
                    layer.msg(data.result.message);
                }
            },
            change: function (e, data) {
                var fs = $('.imgbox').size();
                var hjfiles = fs + data.files.length;
                if(hjfiles > maxfiles){
                    layer.msg('最多只能上传'+maxfiles+'个图片');
                    return false;
                }
                $("#imgUpload_name_{$name}n2").html('上传图片...');
            },
            progressall: function (e, data) {
                var progressnum = parseInt(data.loaded / data.total * 100);
                if (progressnum == 100) {
                    $("#progress_{$name}n2").text('');
                    $("#imgUpload_name_{$name}n2").html('上传图片');
                } else {
                    $("#progress_{$name}n2").text(progressnum + "%");
                }
            },
            error: function(e,data){
                layer.msg('上传请求失败');
            }
        });

        $( '#imgsbox_{$name}n2' ).DDSort({
            target: 'div',
            floatStyle: {
                'border': '1px solid #ccc',
                'background-color': '#fff'
            }
        });
    });

    /**
     * 移除图片
     */
    function removePic(_self){
        $(_self).parent().remove();
    }
</script>