使用从数据库传递的id将文件上载链接到表中的按钮

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用从数据库传递的id将文件上载链接到表中的按钮相关的知识,希望对你有一定的参考价值。

使用一些遗留代码,并尝试附加一些功能。该页面用于处理上传。页面底部是与处置相关的文件表。这些文件(附件)保存在数据库的表中,每个文件都有自己的ID。

客户想在每个条目旁边的每一行上添加一个“替换”按钮(已经有一个下载和删除按钮)。点击后,就会显示文件上传表单。应该发生的是客户端上传的文件应该通过ID替换表中的附件。但是,当我点击“替换”按钮时,它会显示表格以替换表格顶部的附件。

如何通过ID(通过数据库表)将按钮链接到表单?

这是表...'''

<table class="table table-striped table-bordered table-hover table-hover table-full-width">
    <thead>
        <tr>
            <th class="center hidden-xs"></th>
            <th style="display:none;">ID</th>
            <th>File Name</th>
            <th>Figure Name</th>
            <th>Date Uploaded</th>
            <th>Rearrange Order</th>
        </tr>
        </thead>
    <tbody>
    <cfset loopCount = 1 />
    <cfset ids = '' />
    <cfset allowDown = #qAttachments.recordCount# />
    <cfloop query = "qAttachments">
    <cfset ID = "#qAttachments.id#">
    <cfset fileName="#qAttachments.filename#">
    <cfset fileExt=ListLast(fileName,".")>
    <cfset filePath = "/secure/edFiles/edAttachments/ED_#session.module.id#/#url.edID#/#fileName#"><!---removed.pdf--->
        <tr>
            <div id="replaceAtt" style="display: none" >
                <div class="col-md-6">
                  <div class="fileupload fileupload-new" data-provides="fileupload">
                            <div class="input-group">
                                <div class="form-control uneditable-input">
                                    <i class="fa fa-file fileupload-exists"></i>
                                    <span class="fileupload-preview"></span>
                                </div>
                                <div class="input-group-btn">
                                    <div class="btn btn-blue btn-file">
                                        <span class="fileupload-new"><i class="fa fa-folder-open-o"></i> Select file</span>
                                        <span class="fileupload-exists"><i class="fa fa-folder-open-o"></i> Change</span>
                                        <input type="file" id="replaceEDFile" name="replaceEDFile" title="Select File to Replace #ID#">
                                    </div>
                                    <a href="" class="btn btn-blue fileupload-exists" data-dismiss="fileupload">
                                        <i class="fa fa-times"></i> Remove
                                    </a>
                                </div>
                            </div>
                        </div>
                </div>

                <div class="col-md-2">
                    <div class = "btn btn-blue btn-block" value="#ID#" type = "submit" name ="replaceFile"  onClick="location.href='edFormData.cfm?replaceFile=#ID#&m=#url.m#&edID=#url.edID#&#r#&ai=#url.ai#'">
                          Upload File <i class = "fa fa-arrow-circle-right" ></i>                                
                    </div>
                </div>
            </div>
        </tr>
        <tr>

            <td class="center hidden-xs">
                <a href="#filePath#"><button type = "button" class="fa" name="download" id="download" value="#ID#" onClick="location.href='edFormData.cfm?download=#ID#&m=#url.m#&edID=#url.edID##r#&ai=#url.ai#'">           <img src="../assets/Icons/viewdoc.png"></button></a>   

                <cfif readonly NEQ "readonly">

                <button type = "button"  class="fa" name="Delete" id="Delete" value ="#ID#" onClick="location.href='edFormData.cfm?del=#ID#&m=#url.m#&edID=#url.edID##r#&ai=#url.ai#'">
                <img src="../assets/Icons/trash-o_ff0400_20.png"></button>

                <button id="replace" type = "button" class ="replace" name="replace" value="#ID#" title="Replace attachment #ID#" >
                 <img src="../assets/Icons/file_replace_000000.png">
                </button>
                </cfif>
            </td>
            <td style="display:none;">#ID#</td>
            <td id="file_#ID#">#qAttachments.filename#</td>
            <td id="figure_#ID#">#qAttachments.figureName#</td>
            <td id="uploaded_#ID#">#qAttachments.uploaded#</td>
            <td>
                <cfif loopCount NEQ 1>
                    <div class = "btn btn-green btn-block" id="moveUP_#ID#">Move Up</div><br />
                </cfif>
                <cfif loopCount NEQ allowDown>
                    <div class = "btn btn-blue btn-block" id="moveDown_#ID#">Move Down</div>
                </cfif>
            </td>
        </tr>

        <cfif loopCount NEQ allowDown>
            <cfset ids = #ids#&"#ID#," />
        <cfelse>
            <cfset ids = #ids#&"#ID#" />
        </cfif>
        <cfset loopCount=(#loopCount#+1) />
    </cfloop>
    <input type="hidden" id="possibleIDs" value="#ids#" />
</tbody>
</table> 

'''

这是javascript ......'''

<script>
    $(document).ready(function(){
        $('.replace').click(function(e){        
            e.preventDefault();
            $("#replaceAtt").slideToggle('fast');
        });
});

</script>

'''

答案

这是一个代码审查/评论,而不是一个完整的答案。这段代码中有很多内容。正如詹姆斯所说,你的代码混合了表格和div并抛出一些Bootstrap。有很多变量浮动在那里,但没有明确它们在哪个范围(如readonly)和许多不是真正需要的变量(如loopcountallowDown)。还有一些变量不需要引号和磅(如<cfset ID = "#qAttachments.filename#">,可以只是<cfset ID = qAttachments.ID>)和一些URL变量直接在代码中使用的地方。还有其他一些事情。

这是遗留代码,所以我完全理解。它就是它,如果它是CF11代码,自从它首次编写以来,可能已经有很多改进。这里很容易成为周一早上四分卫。

也就是说,您可以在tbody标签之间显着减少您在此页面中的操作。

为了简化一些事情,我遗漏了你正在循环的大部分html

由于您使用的是查询循环,因此您无需跟踪循环计数,因为它已经是currentRow中查询结果的一部分。而且您不需要设置allowDown,因为您只引用了一次。你唯一真正需要的是初始化ids,这样你就可以ListAppend()而不是试图弄清楚如何处理一个尾随的逗号。

<cfset ids="">

<cfoutput>

<cfloop query="qAttachments">
    <!--- HTML Display Code In This Block --->
    EXAMPLE: WE ARE ON ID = #id# 
    <!--- Move Buttons --->        
    <cfif currentRow NEQ 1> MOVE UP </cfif>
    <cfif currentRow NEQ qAttachments.recordcount> MOVE DOWN </cfif>
    <br>
    <!--- --->
    <!--- Build ID list for hidden form. --->
    <cfset ids = ListAppend(ids,id)>
</cfloop>

<br>
< hiddenFormInput > possibleIDs = "#ids#" < /hiddenFormInput >

</cfoutput>

https://cffiddle.org/app/file?filepath=870efd11-b974-4905-8d47-9afb41fa2a10/e47a5d00-1a86-4cd9-8996-f256ad72dff5/49648087-5075-48c1-9a96-23d20b6e2d82.cfm

同样,这只是概念代码,以更好地构建您的循环。并且就此而言,由于这是CF11,你可以更好地使用cfsccript而不是cftags进行循环。我建议将你的CFML代码从你的显示代码中分离出来,可能还有一个CF函数可以返回一组数据来循环显示。

我要评论的最后一件事是使用ID作为通用名称。在你的循环中,你有3个不同的ID变量在使用:1)session.module.id 2)ID来自你的查询3)和ID变量,基于你的循环查询ID。在这种特定的情况下,你得到了你想要的值,但是在页面上有多个具有相同名称的变量通常是个坏主意,并且ID很容易做到。所需要的只是评估顺序的改变,这将使您头痛,难以调试。

另一答案

我要感谢所有评论和帮助的人。我知道代码充其量是janky,但当我开始搞乱已经在循环中的什么时,其他地方的东西就会破坏。但我确实找到了问题(在比我更聪明的同事的帮助下)为什么我无法将按钮链接到div并显示该行的那一行的正确上传表格!这是图像......是的,图像。我决定让JS只是在按下按钮时发出ID名称的警报。经过一番黑客攻击后,我有时会让它上班,而其他时候只是推出了NaN。有了一些“Inspect Element”魔法,我们发现它根据我点击按钮的位置输出了ID或NaN。这导致我们意识到图像本身需要一个id,因为这是在点击时试图被拉。

所以,这就是我改为上面发布的代码:

首先,我将保存上传表单的div拉出循环,因此我没有填充多个表单,我可以切换附件替换而无需重新加载屏幕上有一堆移动的页面。

二,实际按钮本身:

<button type = "button" class ="replace" name="replace" id="replace_#ID#" value="#ID#" title="Replace #qAttachments.figureName#" >
    <!--- Gave the image an ID, so if it is clicked it can still split properly. --->   
    <img id="replaceImg_#ID#" src="../assets/Icons/file_replace_000000.png">
</button>

第三,JavaScript。

<script>

    $('[id^="replace_"], [id^="replaceImg_"]').click(function(e){

        // Split the ID to get the number (lines up with DB ID).
        var replaceID = e.target.id.split("_")[1];

        // Set this to let the user know which file is being replaced (by figure name).
        var figNameRep = $('#figure_'+replaceID).text();

        // If the upload replacement is not showing yet, make it show now.
        if ($('#replaceAtt').css("display") == 'none'){
            $('#replaceAtt').slideToggle("fast");
        }

        // Don't worry about hiding and unhiding, just switch the IDs around as needed.
        $('#figNameReplace').text("Replacing file for Figure Name: " + figNameRep);
        $('#replaceFile').val(replaceID);
    });

    </script>

再次感谢大家的意见。你们所提出的想法我都尝试过,虽然我不能让它们中的任何一个起作用(这更像是对我自己技能的评论)但它确实教会了我一些新的工具和方法。你们好棒!

以上是关于使用从数据库传递的id将文件上载链接到表中的按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何使用spring boot将数据从一个html表单传递到多个表

将平面文件中的数据提取到表中

使用VBA - Excel将超链接添加到表中的单元格

错误:加载到表中 - COPY 命令中的数据无效

oracle 将文本文件中的数据加载到表中

无论如何将存储桶中的数据合并到表中但没有任何重复的行?