js ftp upload

     <div class="container"> 
       <div class="row">
           <div class="col-md-6">
                 <input type="text"  id="txtfiledesc"   class="layui-input">
             </div> 
            <div class="col-md-6">
                <div class="layui-upload">
        
  <input type="button" class="layui-btn" id="op1uplload"  value="Upload File"/>
  
</div> 
             </div> 
           </div>

     </div>
      
     <div class="container"> 
       <div class="row">
           <div class="col-md-1">
             </div> 
        <div class="col-md-5">
            <div id="div1" runat="server"  class="popup-gallery"   >
                   
            <table id="tbl1"   class="dts" style="width:100%;border:1px solid #0094ff;border-collapse:collapse;  "    >
            </table> 
               </div>
        </div>
        <div class="col-md-5">
             
               
            <table id="tbl2"   class="dts"     style="width:100%;border:1px solid #0094ff;border-collapse:collapse;  " >

            </table>
           
        </div>
         <div class="col-md-1">
             </div> 
    </div> 
      </div>
                    


    <script>
        $(document).ajaxStart(function () { SetBlockUI(90000); }).ajaxStop(function () { ClearBlockUI(); });
        var tbl1, tbl2;
        var tbdt1 = new Array();
        var tbdt2 = new Array();
        function getuploaddata() {
            console.log("getuploaddata");
            var json = {
                "ASPSESSID": "hh", "ActionName": "MultiFile", "folder": "QMS", "subfolder": "", "sysid": "WorkFlow", "form_id": "xxx",
                "path": "ftp://www.qmtec.net/kaFastFlow/Flow/18081121524585016", "waterWords": "N",
                "form_type": "888888",
                "location": "Item",
                "operation": "op",
                "level": 8,
                "memo": $('#txtfiledesc').val(),
                "lot": "lot",
                "item_id": "item",
                "item_desc": "name",
                "user_id": "user",
                "user_name": "username",
                "vendor": "vendor",
                "status": "New",
                "trx_id": "trxid",
                "info": "info",
                "authority": "user"
            }
            return json;
        }
       
        layui.use('upload', function () {
            var $ = layui.jquery
                , upload = layui.upload;

            //普通图片上传
            var uploadInst = upload.render({
                elem: '#op1uplload'
                , method: "post"
               
                , url: 'http://localhost/WorkFlow/httpserver/formftp.ashx'
                , multiple: false
                , accept: 'file' //普通文件
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    this.data = getuploaddata();
                    layer.load(); //上传loading
                }
                , done: function (res) {
                    layer.closeAll('loading'); //关闭loading
                    if (res.code == "000") {
                        //do something （比如将res返回的图片链接保存到表单的隐藏域）


                        layer.msg('上传成功');
                        
                    }
                    else {

                        layer.msg("上传失败  " + res.msg);
                    }

                    Loadtbl1();
                }
                , error: function () {
                    layer.closeAll('loading'); //关闭loading
                    layer.msg('上传失败');
                }
            });

        });
    </script>

    <script>

        var ftpcolumns = [
            { data: "memo", title: "memo", },
         
            { data: "refid", title: "refid", visible: false, },
             
            {
                data: "file_name", title: "File", className: "bk",

                render: function (data, type, row, meta) {
                    if (row.file_type == 'Pic') {
                        return '<a   style="color:#fff;" target="_blank"  href="' + row.http_path + '">' + '<img src="' + row.http_path  + '" width="20" height="20" /> ' + '</a > ';

                    }
                    else {
                        return '<a   style="color:#fff;" target="_blank"  href="' + row.http_path +   '">' + row.file_name + '</a> ';
                        
                    }

                }
            },
            {
                data: null, title: "Del", sClass: "hidCol",
                render: function (data, type, row, meta) {
                    
                    return " <input type='button' class=\"layui-btn layui-btn-danger layui-btn-xs\" name='btndel' lay-event=\"del\"  value='Delete' />";
                }

            }


        ];

        function TableDel(index, code, msg) {

            tbl1.ajax.reload();
             
        }

        function ShowHidDel() {
            if ($('#hidaction').val() != "Create") {
                $("input[name='btndel']").css("display", "none");
                $(".hidCol").css("display", "none");
            }

            if (tbdt1.length == 0) {
                $('#tbl1').css('display', 'none');
            }
            else {
                $('#tbl1').css('display', 'table');
            }

            if (tbdt2.length == 0) {
                $('#tbl2').css('display', 'none');
            }
            else {
                $('#tbl2').css('display', 'table');
            }
        }

        function Loadtbl1() {

            var ftpjsondata = {
                "cmd": "QueryByFormLocation",
                "location": "Item",
                "form_id": "xxx",
                "level": 999999999
            };

            if (tbl1 != undefined) {
                tbl1.destroy();
            }

            tbl1 = $('#tbl1').DataTable({
                ajax: {
                    type: "post",
                    url: "http://localhost/workflow/HttpServer/ftpserver.ashx",
                    dataType: "json",
                    crossDomain: true,
                    retrieve: true,
                    timeout: 60000,
                    data: function (d) {
                        //  d.action = "W1";
                        return JSON.stringify(ftpjsondata)
                    },

                    dataSrc: function (json) {
                        tbdt1 = [];
                        tbdt2 = [];
                        if (json) {

                            if (json.data != null || json.data != undefined) {

                                json.data.forEach(function (value, index, array) {
                                    if (value.file_type != "Pic") {
                                        console.log(index);
                                        tbdt2.push(value);
                                        // console.log(item.file_name);
                                    }
                                    else {
                                        tbdt1.push(value);

                                    }
                                });
                            }
                            else {

                            }

                            Loadtbl2();
                            return tbdt1;
                        }

                    },

                },
                "info": false,
                "lengthChange": false,//是否允许用户自定义显示数量
                "bPaginate": false, //翻页功能
                "bFilter": false, //列筛序功能
                "searching": false,//本地搜索
                "ordering": true, //排序功能
                "Info": false,//页脚信息
                "emptyTable": " ",
                "zeroRecords": "No matching records found",
                "columns": ftpcolumns,
                "initComplete": function (settings, json) {
                     
                    ShowHidDel();
                }


            });
        }

        function Loadtbl2() {
            if (tbl2 != undefined) {
                $('#tbl2').DataTable().destroy();
                $('#tbl2').empty(); 
            }
            // 
            tbl2 = $('#tbl2').dataTable({
                "data": tbdt2,
                "columns": ftpcolumns,
                "retrieve": true,
                "info": false,
                "lengthChange": false,//是否允许用户自定义显示数量
                "bPaginate": false, //翻页功能
                "bFilter": false, //列筛序功能
                "searching": false,//本地搜索
                "ordering": true, //排序功能
                "Info": false,//页脚信息
                "emptyTable": " ",
                "zeroRecords": "No matching records found",
                "initComplete": function (settings, json) {
                     
                }
            });

            ShowHidDel();
        }


        </script>



    <script>
        $(document).ready(function () {
            Loadtbl1();
             
            //******************88
            $('.popup-gallery').magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: 'Loading image #%curr%...',
                mainClass: 'mfp-img-mobile',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                    titleSrc: function (item) {
                        return item.el.attr('title') + '<small> </small>';
                    }
                }
            });

            $('.poptest').magnificPopup({
                delegate: 'a',
                type: 'image',
                tLoading: 'Loading image #%curr%...',
                mainClass: 'mfp-img-mobile',
                gallery: {
                    enabled: true,
                    navigateByImgClick: true,
                    preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
                },
                image: {
                    tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                    titleSrc: function (item) {
                        return item.el.attr('title') + '<small> </small>';
                    }
                }
            });

           

            $('#tbl1').on('click', 'tr input[name="btndel"]', function () {

               
                var $tr = $(this).parents('tr');
                // event.preventDefault();
                var idx = tbl1
                    .row($(this).parents('tr'))
                    .index();

                var dt = tbl1
                    .row($(this).parents('tr')).data();

                console.log(dt.refid);

                var jsondata = {
                    "cmd": "Delete",
                    "refid": dt.refid
                };
                // alert(idx);

                // $tr.remove();

                if (jConfirm("Are you delete?")) {
                    ajaxTableDel("http://localhost/workflow/HttpServer/ftpserver.ashx", jsondata, idx);
                }
                else {
                    AlertHit("Cancelled...");
                }

            }
            );

            $('#tbl2').on('click', 'tr input[name="btndel"]', function () {


                var $tr = $(this).parents('tr');
                // event.preventDefault();
                var idx = $(this).parents('tr').index();


                tbl2 = $('#tbl2').DataTable();
                var dt = tbl2
                    .row($(this).parents('tr')).data();
                
                console.log(dt.refid);
                var jsondata = {
                    "cmd": "Delete",
                    "refid": dt.refid
                };
                // alert(idx);

                // $tr.remove();

                if (jConfirm("Are you delete?")) {
                    ajaxTableDel("http://localhost/workflow/HttpServer/ftpserver.ashx", jsondata, idx);
                }
                else {
                    AlertHit("Cancelled...");
                }

            }
            );
        });

                  //**********************************
    </script>


    <script>

      
    </script>