如何将上传的文件名同步写到自定义的文本输入框

代码如下

<div class="uploader white">
        <input type="text" class="filename" readonly id="filename" name="filename"/>
        <input type="button" name="filename" class="button" value="上传"/>
        <input type="file" size="30" id="file" name="myFile"/><br>
 </div>
 js代码
 <script>
    var file = $('#file'),
    aim = $('#filename');
    file.on('change', function( e ){
    //e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
    var name = e.currentTarget.files[0].name;
    aim.val( name );
    });
</script>

监听上传事件，将上传的文件名同步到自定义的文本输入框

完整的自定义文件上传代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    pageContext.setAttribute("ctp",request.getContextPath());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${ctp }/scripts/jquery-1.9.1.min.js"></script>
    <title>Insert title here</title>
</head>
<body>
<form action="${ctp}/downloadFile" enctype="multipart/form-data" method="post">
    <div class="uploader white">
        <input type="text" class="filename" readonly id="filename" name="filename"/>
        <input type="button" name="filename" class="button" value="上传"/>
        <input type="file" size="30" id="file" name="myFile"/><br>
    </div>
    <input type="submit" value="提交">
</form>
</body>

<style>
    .uploader{
        position:relative;
        display:inline-block;
        overflow:hidden;
        cursor:default;
        padding:0;
        margin:10px 0px;
        -moz-box-shadow:0px 0px 5px #ddd;
        -webkit-box-shadow:0px 0px 5px #ddd;
        box-shadow:0px 0px 5px #ddd;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        border-radius:5px;
    }
    .filename{
        float:left;
        display:inline-block;
        outline:0 none;
        height:32px;
        width:180px;
        margin:0;
        padding:8px 10px;
        overflow:hidden;
        cursor:default;
        border:1px solid;
        border-right:0;
        font:9pt/100% Arial, Helvetica, sans-serif; color:#777;
        text-shadow:1px 1px 0px #fff;
        text-overflow:ellipsis;
        white-space:nowrap;
        -moz-border-radius:5px 0px 0px 5px;
        -webkit-border-radius:5px 0px 0px 5px;
        border-radius:5px 0px 0px 5px;
        background:#f5f5f5;
        background:-moz-linear-gradient(top, #fafafa 0%, #eee 100%);
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5));
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0);
        border-color:#ccc;
        -moz-box-shadow:0px 0px 1px #fff inset;
        -webkit-box-shadow:0px 0px 1px #fff inset;
        box-shadow:0px 0px 1px #fff inset;
        -moz-box-sizing:border-box;
        -webkit-box-sizing:border-box;
        box-sizing:border-box;
    }
    .button{
        float:left;
        height:32px;
        display:inline-block;
        outline:0 none;
        padding:8px 12px;
        margin:0;
        cursor:pointer;
        border:1px solid;
        font:bold 9pt/100% Arial, Helvetica, sans-serif;
        -moz-border-radius:0px 5px 5px 0px;
        -webkit-border-radius:0px 5px 5px 0px;
        border-radius:0px 5px 5px 0px;
        -moz-box-shadow:0px 0px 1px #fff inset;
        -webkit-box-shadow:0px 0px 1px #fff inset;
        box-shadow:0px 0px 1px #fff inset;
    }
    .uploader input[type=file]{
        position:absolute;
        top:0; right:0; bottom:0;
        border:0;
        padding:0; margin:0;
        height:30px;
        cursor:pointer;
        filter:alpha(opacity=0);
        -moz-opacity:0;
        -khtml-opacity: 0;
        opacity:0;
    }
</style>

<script>
    var file = $('#file'),
    aim = $('#filename');
    file.on('change', function( e ){
    //e.currentTarget.files 是一个数组，如果支持多个文件，则需要遍历
    var name = e.currentTarget.files[0].name;
    aim.val( name );
    });
</script>
</html>

效果如图
在这里插入图片描述

来源：CSDN

作者：weixin_43351526

链接：https://blog.csdn.net/weixin_43351526/article/details/103869310

标签

padding

自定义文件上传样式

如何将上传的文件名同步写到自定义的文本输入框

完整的自定义文件上传代码如下