前台上传文件小优化，上传文件的文件名放到输入框中展示

阳光穿透心脏的1/2处 2022-05-20 04:11 135阅读 0赞

功能：点击选择时选择文件，选择完后把文件名放到输入框中

![70][]

实现：

<!DOCTYPE html>
    <html>
    <head>
        <title>文件上传下载</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    
        <script src="../js/jquery-1.10.2.js" charset="UTF-8"></script>
    </head>
    <body>
    
    <div align="center">
        <form action="/file">
            <input type="text" disabled = "disabled" placeholder="请选择文件" id = "te"><br><br>
            <input type="button" value="选择" id = "bu">
            <input type="file" id = "fi"  style="display:none">
            <input type="submit">
        </form>
    </div>
    </body>
    <script>
        $(function(){
            /*把上传文件按钮的方法传给普通按钮*/
            $("#bu").unbind("click").bind("click",function(){
               $("#fi").click();
            });
            /*把上传的文件名放到输入框中*/
            $("#fi").bind("change",function(){
               $("#te").attr("value",$("#fi").val());
            });
        });
    </script>
    
    </html>

[70]: /images/20220520/ba14f211a82c45059c5182c0fdfb084c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，135人围观）

还没有评论，来说两句吧...

相关阅读

相关文件同步上传方法(上传到本地)

后台: @Override public List<Dept> showAll() { return deptDubboService.f

骑猪看日落/ 2023年09月24日 15:13/ 0 赞/ 132 阅读

相关上传文件 JSONP 输入框验证

一、上传文件 1.1、form上传 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] ------

骑猪看日落/ 2023年08月17日 16:19/ 0 赞/ 118 阅读

相关 thinkadmin文件上传时获取并显示上传文件名

html代码部分 <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20

╰+哭是因爲堅強的太久メ/ 2022年12月09日 04:56/ 0 赞/ 245 阅读

相关 php 上传文件,PHP 文件上传

文件上传概述文件上传功能是网络生活中经常使用的一个功能。使用 PHP 可以很方便的实现文件上传，其具体流程如下：表单选择文件 -> 检查文件大小及类型 -> 生成临时文

以你之姓@/ 2022年11月12日 10:52/ 0 赞/ 335 阅读

相关【上传】Nginx 上传文件

本文包含知识点： > 1、nginx服务搭建 > > 2、nginx文件上传模块搭建 > > 3、文件重命名服务搭建 > > 3、nginx整体配置 > > 4、

浅浅的花香味﹌/ 2022年10月11日 12:14/ 0 赞/ 473 阅读

相关前台上传文件小优化，上传文件的文件名放到输入框中展示

功能：点击选择时选择文件，选择完后把文件名放到输入框中 ![70][] 实现： <!DOCTYPE html> <html> <head>

阳光穿透心脏的1/2处/ 2022年05月20日 04:11/ 0 赞/ 136 阅读

相关 android文件上传优化分享（切片上传）

我重点看的是切片上传的原理。原文链接：[https://www.jianshu.com/p/b4c453649d92][https_www.jianshu.com_p_b4

灰太狼/ 2022年05月17日 08:44/ 0 赞/ 331 阅读

相关文件上传设置上传文件大小

控制台报错 org.apache.tomcat.util.http.fileupload.FileUploadBase$SizeLimitExceededExcept

男娘i/ 2022年04月17日 05:08/ 0 赞/ 370 阅读

相关上传文件前台后台必备的条件

前台： 1.表单提交方式为post 2.有文件上传输入框<input type="file" name="xxx"这里的name是什么，后台接收的MutipartFile

比眉伴天荒/ 2021年12月17日 06:25/ 0 赞/ 281 阅读

相关 js上传文件；input上传文件；

html原生上传文件方式1： ![在这里插入图片描述][20210324233047985.gif] <!DOCTYPE html> <html>

小灰灰/ 2021年09月07日 06:20/ 0 赞/ 640 阅读