zc100/template/pc/users/article_images_edit.htm

<div class="item-from-row" style="display: none;" id="tupianji">
    <div class="from-row-l">
        <label>图片集：</label>
    </div>
    <div class="from-row-r">
        <div class="images_upload_main" id="tab_imgupload">
          <!-- <a  href="javascript:void(0);" onClick="GetUploadify(30,'','allimg','imgupload_call_back');" class="el-button el-button--primary is-plain el-button--small" title="拖动修改排序">
              <i class="el-icon-picture"></i>上传图片
          </a> -->
            <div class="sort-list images_upload_list" >
                {volist name="imgupload_list" id="vo" key="k"}
                <div class="images_upload">
                    <div class="images_upload_item">
                        <input type="hidden" name="imgupload[]" value="{$vo['image_url']}">
                        <a  href="{$vo['image_url']}" onclick=""  title="拖动修改排序">
                            <img src="{$vo['image_url']}" width="120" height="120">
                        </a>
                        <a  href="javascript:void(0)" onclick="ClearPicArr2(this,'{$vo['image_url']}')" class="delete" title="删除"></a>
                    </div>
                    <textarea rows="5" cols="60" name="imgintro[]" style="height:28px; width: 120px;" placeholder="图片注释" title="标签调用：{literal}{$field.intro}{/literal}">{$vo.intro}</textarea>
                </div>
                {/volist}
                <div class="images_upload">
                </div>
            </div>
            <a  href="javascript:void(0);" onClick="GetUploadify(30,'','allimg','imgupload_call_back');" class="img-upload" title="点击上传">
                <div class="y-line"></div>
                <div class="x-line"></div>
            </a>
        </div>
        <!-- 上传图片显示的样板 start -->
        <div class="images_upload_tpl none">
            <div class="images_upload">
                <div class="images_upload_item">
                    <input type="hidden" name="imgupload[]" value="" />
                    <a  href="javascript:void(0);" onClick="" title="拖动修改排序">
                        <img src="__STATIC__/admin/images/add-button.jpg" width="120" height="120" />
                    </a>
                    <a  href="javascript:void(0)" class="delete" title="删除">&nbsp;&nbsp;</a>
                </div>
                <textarea rows="5" cols="60" name="imgintro[]" style="height:28px; width: 120px;" placeholder="图片注释" ></textarea>

            </div>
        </div>
      <!-- 上传图片显示的样板 end -->
    </div>
</div>
<script type="text/javascript">

    $(function(){
        if ($("#tab_imgupload input[type=hidden]").length > 0) {
            $('#tab_imgupload .images_upload_list').show();
        } else {
            $('#tab_imgupload .images_upload_list').hide();
        }
    });

    // 单图上传  2021.01.05
    function upload_single_pic_1609837252(e,input_id){
      var file = $(e)[0].files[0];
      if (!file) {
          return false;
      }
      var formData = new FormData();
      formData.append('file',file);
      formData.append('_ajax',1);
      layer_loading('正在处理');
      $.ajax({
          type: 'post',
          url: eyou_basefile + "?m=user&c=Uploadify&a=imageUp",
          data: formData,
          contentType: false,
          processData: false,
          dataType: 'json',
          success: function (res) {
              if (res.state == 'SUCCESS') {
                  $("#single_pic_input_"+input_id).val(res.url)
                  $(".img1_"+input_id).attr('src',res.url);
                  layer.closeAll();
              } else {
                  layer.closeAll();
                  showErrorAlert(res.state);
              }
          },
          error : function(e) {
              layer.closeAll();
              showErrorAlert(e.responseText);
          }
      })
    }

    function img_call_back(fileurl_tmp)
    {
      $("#litpic_local").val(fileurl_tmp);
      $("#img_a").attr('href', fileurl_tmp);
      $("#img_i").attr('onmouseover', "layer_tips=layer.tips('<img src="+fileurl_tmp+" class=\\'layer_tips_img\\'>',this,{tips: [1, '#fff']});");
      $("input[name=is_litpic]").attr('checked', true); // 自动勾选属性[图片]
    }

    // 上传图集相册回调函数
    function imgupload_call_back(paths){

      var  last_div = $(".images_upload_tpl").html();
      // var  last_div = $(".images_upload:last").prop("outerHTML");
      for (var i=0;i<paths.length ;i++ )
      {
          $(".images_upload:eq(0)").before(last_div);  // 插入一个 新图片
          $(".images_upload:eq(0)").find('a:eq(0)').attr('href',paths[i]).attr('onclick','').attr('target', "_blank");// 修改他的链接地址
          $(".images_upload:eq(0)").find('img').attr('src',paths[i]);// 修改他的图片路径
          $(".images_upload:eq(0)").find('a:eq(1)').attr('onclick',"ClearPicArr2(this,'"+paths[i]+"')").text('');
          $(".images_upload:eq(0)").find('input').val(paths[i]); // 设置隐藏域 要提交的值
      }
          
    if ($("#tab_imgupload input[type=hidden]").length > 0) {
        $('#tab_imgupload .images_upload_list').show();
    }
    }
    /*
    * 上传之后删除组图input
    * @access   public
    * @val      string  删除的图片input
    */
    function ClearPicArr2(obj,path)
    {
      // 删除数据库记录
      $.ajax({
          type:'POST',
          url:"{:url('user/UsersRelease/del_channelimgs', ['_ajax'=>1])}",
          data:{filename:path},
          success:function(){
              $(obj).parent().parent().remove(); // 删除完服务器的, 再删除 html上的图片
              if ($("#tab_imgupload input[type=hidden]").length == 0) {
                  $('#tab_imgupload .images_upload_list').hide();
              }
              $.ajax({
                  type:'POST',
                  url:"{:url('Uploadify/delupload', ['_ajax'=>1])}",
                  data:{action:"del", filename:path},
                  success:function(){}
              });
          }
      });
    }

    /** 以下 图集相册的拖动排序相关 js*/

    $( ".sort-list" ).sortable({
      start: function( event, ui) {

      }
      ,stop: function( event, ui ) {
      }
    });
    //因为他们要拖动，所以尽量设置他们的文字不能选择。
    $( ".sort-list" ).disableSelection();
</script>