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

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

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

70

实现：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>文件上传下载</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  7.     <script src="../js/jquery-1.10.2.js" charset="UTF-8"></script>
  8. </head>
  9. <body>
  11. <div align="center">
  12.     <form action="/file">
  13.         <input type="text" disabled = "disabled" placeholder="请选择文件" id = "te"><br><br>
  14.         <input type="button" value="选择" id = "bu">
  15.         <input type="file" id = "fi"  style="display:none">
  16.         <input type="submit">
  17.     </form>
  18. </div>
  19. </body>
  20. <script>
  21.     $(function(){
  22.         /*把上传文件按钮的方法传给普通按钮*/
  23.         $("#bu").unbind("click").bind("click",function(){
  24.            $("#fi").click();
  25.         });
  26.         /*把上传的文件名放到输入框中*/
  27.         $("#fi").bind("change",function(){
  28.            $("#te").attr("value",$("#fi").val());
  29.         });
  30.     });
  31. </script>
  33. </html>

发表评论

表情：
评论列表 （有 0 条评论，225人围观）

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

相关阅读

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

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

    以你之姓@以你之姓@/ 0 赞/ 487 阅读