题 jQuery:从中获取文件名


这段代码应该有效 在IE中 (甚至不在Firefox中测试它),但事实并非如此。 我想要的是显示附件的名称。有帮助吗?

<html>
<head>
  <title>example</title>    
  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript">  
        $(document).ready( function(){            
      $("#attach").after("<input id='fakeAttach' type='button' value='attach a file' />");      
      $("#fakeAttach").click(function() {            
        $("#attach").click();        
        $("#maxSize").after("<div id='temporary'><span id='attachedFile'></span><input id='remove' type='button' value='remove' /></div>");        
        $('#attach').change(function(){
          $("#fakeAttach").attr("disabled","disabled");          
          $("#attachedFile").html($(this).val());
        });        
        $("#remove").click(function(e){
          e.preventDefault();
          $("#attach").replaceWith($("#attach").clone());
          $("#fakeAttach").attr("disabled","");
          $("#temporary").remove();
        });
      })
    }); 
  </script> 
</head>
<body>
  <input id="attach" type="file" /><span id="maxSize">(less than 1MB)</span>    
</body>
</html>

84
2017-08-19 10:39


起源


检查我的答案,我相信这是实现这一目标的最佳和最可理解的方式。 - James111


答案:


就像写作一样简单:

$('input[type=file]').val()

无论如何,我建议使用名称或ID属性来选择您的输入。 对于事件,它应该如下所示:

$('input[type=file]').change(function(e){
  $in=$(this);
  $in.next().html($in.val());
});

141
2017-08-19 10:44



谢谢!这对我提出的先前(和简化)问题起了作用,但它不适用于扩展版本。
如何获取文件的完整路径,上面的代码只给出了文件名。 - Khurram Ijaz
@PHP牧师,你不能。浏览器不会暴露这种信息。 - zneak
@PHP牧师,如果你能做到这一点,你可能偷偷地通过AJAX传输有关用户文件系统的数据,用户可能永远不会知道。想象一下,如果你能以编程方式,会有多糟糕 组 文件输入的值。是啊。安全问题。 - jinglesthula
这似乎有点过头了?我列出的方式更容易理解。 - James111


$('input[type=file]').change(function(e){
    $(this).parents('.parent-selector').find('.element-to-paste-filename').text(e.target.files[0].name);
});

此代码不会显示 C:\fakepath\ 在使用的情况下,在谷歌浏览器中的文件名之前 .val()


19
2018-02-12 18:44





最简单的方法是简单地使用以下行 jquery,使用这个你没有得到 /fakepath 废话,你直接得到上传的文件:

$('input[type=file]')[0].files[0]; // This gets the file
$('#idOfFileUpload')[0].files[0]; // This gets the file with the specified id

其他一些有用的命令是:

要获取文件的名称:

$('input[type=file]')[0].files[0].name; // This gets the file name

要获取文件的类型:

如果我要上传PNG,它会返回 image/png

$("#imgUpload")[0].files[0].type

要获取文件的大小(以字节为单位):

$("#imgUpload")[0].files[0].size

您也不必使用这些命令 on('change',您可以随时获取值,例如您可以上传文件以及用户点击时 upload,您只需使用我列出的命令。


17
2017-11-26 01:59



为什么我得到错误无法读取undefined的属性'name'? - Gagantous


我使用了正常工作的以下。

$('#fileAttached').attr('value', $('#attachment').val())

3
2018-06-07 19:18





<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="blah"/>
<script>
 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(input.files[0]);
        //console.log(reader);
        //alert(reader.readAsDataURL(input.files[0]));
    }
}
</script>

3
2017-12-10 09:45



谢谢!这有助于获取上传文件的实际名称而不是完整路径。 - Evan M
最受欢迎的Evan M - Anil Gupta


//get file input
var $el = $('input[type=file]');
//set the next siblings (the span) text to the input value 
$el.next().text( $el.val() );

2
2017-08-19 10:44





添加隐藏的重置按钮:

<input id="Reset1" type="reset" value="reset" class="hidden" />

单击重置按钮以清除输入。

$("#Reset1").click();

1
2017-12-22 20:59



你能点击一个隐藏的按钮吗? - DaveWalley


<input onchange="readURL(this);"  type="file" name="userfile" />
<img src="" id="viewImage"/>
<script>
 function readURL(fileName) {
    if (fileName.files && fileName.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#viewImage')
                    .attr('src', e.target.result)
                    .width(150).height(200);
        };

        reader.readAsDataURL(fileName.files[0]);
    }
}
</script>

-1
2017-08-22 20:37



谢谢男人,我正在寻找这个,我知道这不是主题,但这是我的答案,你知道;) - Tarek.Eladly