使用jQuery从输入[type='file']获取文件名

This is the uploaded form.

这是上传的表格。

<form class="alert alert-info">    <div>        <b id = "select_file" class="span3" style="font-weight: bold; cursor: pointer; ">Please select image</b>        <input class="span3" type="file" name="image_file" id="image_file" style="display:none " />        <input disabled="true" type="button" value="Upload image" class="btn" />    </div></form>

I use the following script to open a window with files. I want to show a file name in <b id = 'select_file'>.

我使用以下脚本打开一个带有文件的窗口。我想在中显示文件名。

How can I do this?

我该怎么做呢?

$('#select_file').click(function(){    var _this = $(this);    $('#image_file').show().focus().click().hide();    var filename = $('#image_file').val();    _this.html(filename);    $('.btn').attr('disabled', false);});

9 个解决方案

#1

You have to do this on the change event of the input type file this way:

对于输入类型文件的更改事件，您必须这样做:

$('#select_file').click(function() {    $('#image_file').show();    $('.btn').prop('disabled', false);    $('#image_file').change(function() {        var filename = $('#image_file').val();        $('#select_file').html(filename);    });});

#2

Getting the file name is fairly easy. As matsko points out, you cannot get the full file path on the user's computer for security reasons.

获取文件名相当简单。正如matsko指出的，出于安全原因，您无法在用户的计算机上获得完整的文件路径。

var file = $('#image_file')[0].files[0]if (file){  console.log(file.name);}

#3

There is no jQuery function for this. You have to access the DOM element and check the files property.

这里没有jQuery函数。您必须访问DOM元素并检查文件属性。

document.getElementById("image_file").files[0];

或

$('#image_file')[0].files[0]

#4

This was a very important issue for me in order for my site to be multilingual. So here is my conclusion tested in Firefox and Chrome.

这对我来说是一个非常重要的问题，因为我的网站是多语言的。这是我在火狐和Chrome上测试的结论。

jQuery trigger comes in handy.

jQuery触发器很有用。

So this hides the standard boring type=file labels. You can place any label you want and format anyway. I customized a script from http://demo.smarttutorials.net/ajax1/. The script allows multiple file uploads with thumbnail preview and uses PHP and MySQL.

这就隐藏了标准的无趣类型=文件标签。你可以放置任何你想要的标签并格式化它们。我从http://demo.smarttutorials.net/ajax1/定制了一个脚本。该脚本允许使用缩略图预览来上传多个文件，并使用PHP和MySQL。

<form enctype="multipart/form-data" name='imageform' role="form"    ="imageform" method="post" action="upload_ajax.php">    <div class="form-group">        <div id="select_file">Select a file</div>        <input class='file' type="file" style="display: none " class="form-control" name="images_up" id="images_up" placeholder="Please choose your image">        <div id="my_file"></div>        <span class="help-block"></span>    </div>    <div id="loader" style="display: none;">        Please wait image uploading to server....    </div>    <input type="submit" value="Upload" name="image_upload" id="image_upload" class="btn"/></form>$('#select_file').click(function() {    $('#images_up').trigger('click');    $('#images_up').change(function() {        var filename = $('#images_up').val();        if (filename.substring(3,11) == 'fakepath') {            filename = filename.substring(12);        } // Remove c:\fake at beginning from localhost chrome        $('#my_file').html(filename);   });});

#5

You can access to the properties you want passing an argument to your callback function (like evt), and then accessing the files with it (evt.target.files[0].name) :

您可以访问您希望将参数传递给回调函数(如evt)的属性，然后使用它访问文件(evt.target.files[0].name):

$("document").ready(function(){  $("main").append('<input type="file" name="photo" id="upload-photo"/>');  $('#upload-photo').on('change',function(evt) {    alert(evt.target.files[0].name);  });});

#6

Try this to Get filename from input [type='file'] using jQuery.

尝试使用jQuery从输入[type='file']中获取文件名。

<script type="text/javascript">    $(document).ready(function(){        $('input[type="file"]').change(function(e){            var fileName = e.target.files[0].name;            alert('The file "' + fileName +  '" has been selected.');        });    });</script>

Taken from @ jQueryPot

来自@ jQueryPot

#7

var file = $('#YOURID > input[type="file"]');file.value; // filename will be,

var文件= $('#YOURID >输入[type="file"]);file.value;/ /文件名,

In Chrome, it will be something like C:\fakepath\FILE_NAME or undefined if no file was selected.

在Chrome中，它将是C:\fakepath\FILE_NAME或未定义的文件，如果没有选择文件。

It is a limitation or intention that the browser does not reveal the file structure of the local machine.

浏览器不显示本地机器的文件结构是一种限制或意图。

#8

$("#filetosend").prop('files')[0]

#9

-2

This isn't possible due to security reasons. At least not on modern browsers. This is because any code getting access to the path of the file can be considered dangerous and a security risk. Either you'll end up with an undefined value, an empty string or an error will be thrown.

由于安全原因，这是不可能的。至少在现代浏览器上没有。这是因为任何访问文件路径的代码都可能被视为危险和安全风险。要么得到一个未定义的值，要么抛出一个空字符串，要么抛出一个错误。

When a file form is submitted, the browser buffers the file temporarily into an upload directory and only the temporary file name of that file and basename of that file is submitted.

当提交文件表单时，浏览器将文件临时缓存到上传目录中，只提交该文件的临时文件名和该文件的basename。

#1