问

输入类型文件将文件路径添加到跨度

Annia000 发布于 2023-02-13 16:27

文件

我定制了我的输入类型="文件",就像Facebook上传而不是文本框和一个按钮(默认输入类型="文件")我只输入一个按钮,没有文本框,你可以看到文件的路径.我打算在我的自定义输入文件旁边添加一个span或ap标签来显示文件的路径.

选择文件时,如何将文件路径打印到span标记？

HTML代码









    Choose a file to upload

css代码

div.browse-wrap {
        top:0;
        left:0;
        margin:20px;
        cursor:pointer;
        overflow:hidden;
        padding:20px 60px;
        text-align:center;
        position:relative;
        background-color:#f6f7f8;
        border:solid 1px #d2d2d7;}
    div.title {
        color:#3b5998;
        font-size:14px;
        font-weight:bold;
        font-family:tahoma, arial, sans-serif;}
    input.upload {
        right:0;
        margin:0;
        bottom:0;
        padding:0;
        opacity:0;
        height:300px;
        outline:none;
        cursor:inherit;
        position:absolute;
        font-size:1000px !important;}
    span.upload-path {
        margin:20px;
        display:block;}

谢谢!

1 个回答

DEMO

$('input[type="file"]').change(function(){
  $(this).closest('.browse-wrap').next('.upload-path').text(this.value);
});

演示:摆脱C:\fakepath\Chrome

或者使用HTML5 文件API

DEMO

$('input[type="file"]').change(function(){

  var f = this.files[0];  
  var name = f.name;

  $(this).closest('.browse-wrap').next('.upload-path').text(name);

});

2023-02-13 16:29 回答

溪谷小兵

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签