jquery列表页面的文件在点击编辑按钮时如何显示文件

#列表页面如图，有文件。

img

在点击编辑按钮之后，出现

img

但是此时不会出现文件密钥
代码如下

img

浏览器右键 检查 看看显示文件的HTML元素是否生成。
那一句Jquery代码是显示卡键报告文件的呢

可以采用ajaxfileupload上传文件，实现你要的效果。如有帮助，请采纳。
参考如下：
https://www.cnblogs.com/labimeilexin/p/6742647.html


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<script type="text/javascript" src="<%=basePath%>resources/js/jquery-1.2.1.js"></script>
<script type="text/javascript" src="<%=basePath%>resources/js/ajaxfileupload.js"></script>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>ajax文件上传</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="validate/ajaxfileupload.css" />
    <script type="text/javascript" src="validate/jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="validate/ajaxfileupload.js" ></script>
    <script type="text/javascript">
    $(function(){
       //上传图片
       $("#btnUpload").click(function() {
               alert(ajaxFileUpload());
       });
    });
    function ajaxFileUpload() {
        // 开始上传文件时显示一个图片
        $("#wait_loading").ajaxStart(function() {
            $(this).show();
        // 文件上传完成将图片隐藏起来
        }).ajaxComplete(function() {
            $(this).hide();
        });
        var elementIds=["flag"]; //flag为id、name属性名
        $.ajaxFileUpload({
            url: 'uploadAjax.htm', 
            type: 'post',
            secureuri: false, //一般设置为false
            fileElementId: 'file', // 上传文件的id、name属性名
            dataType: 'text', //返回值类型，一般设置为json、application/json
            elementIds: elementIds, //传递参数到服务器
            success: function(data, status){  
                alert(data);
            },
            error: function(data, status, e){ 
                alert(e);
            }
        });
        //return false;
    }
    </script>
  </head>
  
  <body>
    <div id="wait_loading" style="padding: 50px 0 0 0;display:none;">
        <div style="width: 103px;margin: 0 auto;"><img src="<%=path %>/images/loading.gif"/></div>
        <br></br>
        <div style="width: 103px;margin: 0 auto;"><span>请稍等...</span></div>
        <br></br>
    </div>
    <input type="file" id="file" name="file"><br/>
    <input type="hidden" id="flag" name="flag" value="ajax文件上传"/>
    <input type="button" id="btnUpload" value="上传图片" />
  </body>
</html>

不能给type为file的input 直接赋值的，那个只有在选择文件才会自动赋值的，如果你只是要显示，你可以加一个标签，比如div或者a标签都可以

然后赋值:$('#file_txt').html('文件')

img


1.你上面这一块改成这样


<div class="col-sm-8 col-xs-8">
      <span id="form_update_cardReportName"></span>
      <input type="file" name="file" class="form-control">
    <div>
  1. 赋值的时候这样赋值
//fileName是文件名,它只是会显示一个文件名，然后你点击文件名，对文件进行预览。
$('#form_update_cardReportName').text(fileName);

通过一个<div>来显示这个文件名

不同类型的文件调用不同支持库显示

在文件上传时 获取文件相关信息 大小 文件名等内容,存下, 当要回显是进行处理


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <title>Document</title>
</head>

<body>
 <input id="file" type="file" name="file" type="text">
    <script>
        $('#file').change(res => {
            // 文件信息
            console.log(res.target.files, '===')
        })
    </script>
</body>

</html>