jQuery：获取从<input type =“ file” />中选择的文件名

90

此代码应在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>

检查我的答案，我相信这是实现这一目标的最好，最容易理解的方法。

— James111

147

就像写这样简单：

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

无论如何，我建议使用名称或ID属性来选择您的输入。有了事件，它应该看起来像这样：

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

— 思想家
source

谢谢！这可以解决我之前提出的问题（但经过简化），但不适用于扩展版本。

如何获取文件的完整路径上面的代码仅给出了文件名。

— Khurram Ijaz

3

@PHP牧师，你不能。浏览器不会公开此类信息。

— zneak 2011年

2

@PHP Priest，如果可以这样做，则可以通过AJAX秘密传输有关用户文件系统的数据，而用户可能永远不会知道。想象一下，如果您可以通过编程方式设置文件输入的值，那将会有多糟糕。是的安全问题。

— jinglesthula 2011年

1

这似乎有点过头了？我列出的方式更容易理解。

— 詹姆斯111

20

最简单的方法是简单地使用的以下行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，只需使用我列出的命令即可。

— 詹姆斯111
source

为什么会出现错误无法读取未定义的属性“名称”？

— 硕大的

19

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

如果使用，则此代码不会C:\fakepath\在Google Chrome中的文件名之前显示.val()。

— Anatolii Pazhyn
source

4

<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>

— 阿尼尔·古普塔（Anil Gupta）
source

谢谢！这有助于获取上载文件的实际名称，而不是完整路径。

— 埃文M

3

我已经使用了下面的工作正常。

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

— 伊马尔
source

2

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

— 红方格
source

1

添加一个隐藏的重置按钮：

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

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

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

— 丹尼尔·叶
source

1

您可以单击隐藏按钮吗？

— DaveWalley 2014年

-1

<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>

— 拉古拉伊·辛格·古哈尔（Raghuraj Singh Gurjar）
source

谢谢我我正在寻找的人，我知道这不是主题，但这是我的回答；）

— Tarek.Eladly.18年