Sử dụng jQuery để lấy tên tệp đã chọn của tệp nhập mà không có đường dẫn

Tôi đã sử dụng điều này:

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

để lấy tên tệp đã chọn, nhưng nó trả về đường dẫn đầy đủ, như trong "C: \ fakepath \ filename.doc". Phần "fakepath" thực sự ở đó - không chắc nó có phải không, nhưng đây là lần đầu tiên tôi làm việc với tên tệp tải lên tệp.

Làm thế nào tôi có thể nhận được tên tập tin (filename.doc)?

var filename = $('input[type=file]').val().split('\\').pop();

hoặc bạn chỉ có thể làm (vì nó luôn C:\fakepathđược thêm vào vì lý do bảo mật):

var filename = $('input[type=file]').val().replace(/C:\\fakepath\\/i, '')

Bạn chỉ cần làm mã dưới đây. [0] đầu tiên là truy cập phần tử HTML và thứ hai [0] là truy cập tệp đầu tiên của tệp tải lên (Tôi đã bao gồm xác thực trong trường hợp không có tệp):

    var filename = $('input[type=file]')[0].files.length ? ('input[type=file]')[0].files[0].name : "";

Chrome trả lại C:\fakepath\...vì lý do bảo mật - một trang web sẽ không thể có được thông tin về máy tính của bạn, chẳng hạn như đường dẫn đến tệp trên máy tính của bạn.

Để chỉ lấy phần tên tệp của chuỗi, bạn có thể sử dụng split()...

var file = path.split('\\').pop();

jsFiddle .

... hoặc một biểu thức thông thường ...

var file = path.match(/\\([^\\]+)$/)[1];

jsFiddle .

... hoặc lastIndexOf()...

var file = path.substr(path.lastIndexOf('\\') + 1);

jsFiddle .

Nhận đường dẫn làm việc với tất cả các hệ điều hành

var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');

Thí dụ

C:\fakepath\filename.doc 
/var/fakepath/filename.doc

Cả hai trở về

filename.doc
filename.doc

Đây là cách tôi làm, nó hoạt động khá tốt.

Trong HTML của bạn làm:

<input type="file" name="Att_AttributeID" onchange="fileSelect(event)" class="inputField" />

Sau đó, trong tệp js của bạn tạo một chức năng đơn giản:

function fileSelect(id, e){
    console.log(e.target.files[0].name);
}

Nếu bạn đang thực hiện nhiều tệp, bạn cũng có thể nhận được danh sách bằng cách lặp qua điều này:

e.target.files[0].name

có thể một số bổ sung để tránh fakepath:

var fileName = $('input[type=file]').val();
var clean=fileName.split('\\').pop(); // clean from C:\fakepath OR C:\fake_path 
alert('clean file name : '+ fileName);

Còn những thứ như thế này thì sao?

var pathArray = $('input[type=file]').val().split('\\');
alert(pathArray[pathArray.length - 1]);

Nó có phải là jquery? Hoặc bạn chỉ có thể sử dụng nguồn gốc của JavaScript yourpath.split("\\")để phân chia chuỗi thành một mảng?

Lấy tệp đầu tiên từ điều khiển và sau đó lấy tên của tệp, nó sẽ bỏ qua đường dẫn tệp trên Chrome và cũng sẽ sửa đường dẫn cho trình duyệt IE. Khi lưu tệp, bạn phải sử dụng System.io.Path.GetFileNamephương thức để chỉ lấy tên tệp cho trình duyệt IE

var fileUpload    = $("#ContentPlaceHolder1_FileUpload_mediaFile").get(0); 
var files         =  fileUpload.files; 
var mediafilename = ""; 

for (var i = 0; i < files.length; i++) { 
  mediafilename = files[i].name; 
} 

<script type="text/javascript">

    $('#upload').on('change',function(){
       // output raw value of file input
       $('#filename').html($(this).val().replace(/.*(\/|\\)/, '')); 

        // or, manipulate it further with regex etc.
        var filename = $(this).val().replace(/.*(\/|\\)/, '');
        // .. do your magic

        $('#filename').html(filename);
    });
</script>

var filename=location.href.substr(location.href.lastIndexOf("/")+1);
alert(filename);

Sự thay thế này có vẻ thích hợp nhất.

$('input[type="file"]').change(function(e){
        var fileName = e.target.files[0].name;
        alert('The file "' + fileName +  '" has been selected.');
});

Ở đây bạn có thể gọi như thế này Hãy để đây là điều khiển Tệp đầu vào của tôi

  <input type="file" title="search image" id="file" name="file" onchange="show(this)"  />

Bây giờ đây là Jquery của tôi được gọi khi bạn chọn tệp

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

</script>

Chúng tôi cũng có thể loại bỏ nó bằng cách sử dụng match

var fileName = $('input:file').val().match(/[^\\/]*$/)[0];
$('#file-name').val(fileName);