guoyao-jiankang/application/admin/view/common/upfile.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="{if isset($accept) && $accept}{$accept}{else}*/*{/if}" data-url="{:url('File/upfile')}" />
    </a>
    {if isset($accept) && $accept}
     只能上传{$accept}类型文件
    {/if}
    <div id="imgsbox_{$name}n2" class="imgsbox">
<!--        <div><span>dsdfsdfsdf</span> <a href="javascript:;" class="text-danger">删除</a> </div>-->
    </div>
</div>
<script>
    $(function(){
        var imgs = '{$val}';
        var multi = parseInt('{$multi}');
        var name = "{$name}";
        imgs = imgs?imgs.split(','):[];
        let initstr = '';
        for (let i in imgs){
            initstr += '<div>';
            if(multi){
                initstr += '<input type="hidden" name="'+name+'[]" value="' + imgs[i] + '">';
            }else{
                initstr += '<input type="hidden" name="'+name+'" value="' + imgs[i] + '">';
            }
            initstr += '<span>'+format_path(imgs[i])+'</span>&nbsp;&nbsp;';
            initstr += '<a href="javascript:;" class="text-danger" onclick="removePic(this)">删除</a>';
            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>';
                    img += '<input type="hidden" name="'+name+'" value="' + data.result.data.path + '">';
                    img += '<span>'+format_path(data.result.data.path)+'</span>&nbsp;&nbsp;';
                    img += '<a href="javascript:;" class="text-danger" onclick="removePic(this)">删除</a>';
                    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) {
                $("#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();
    }

    function format_path(path) {
        let strs = path.split('/');
        return strs[strs.length - 1];
    }
</script>