zc100/template/pc/users/article_images_add.htm

<div class="item-from-row" 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 mt10 images_upload_list" style="display: none;">
                <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" style="display: 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">

    // 单图上传  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>