ใช้ jQuery เพื่อรับชื่อไฟล์ที่เลือกของไฟล์ที่ไม่มีพา ธ

ฉันใช้สิ่งนี้:

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

เพื่อรับชื่อไฟล์ที่เลือก แต่มันกลับเส้นทางแบบเต็มเช่นเดียวกับใน "C: \ fakepath \ filename.doc" ส่วน "fakepath" มีอยู่จริง - ไม่แน่ใจว่าควรจะเป็นหรือไม่ แต่นี่เป็นครั้งแรกที่ฉันทำงานกับชื่อไฟล์ที่อัพโหลดไฟล์

ฉันจะได้รับชื่อไฟล์ (filename.doc) ได้อย่างไร

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

หรือคุณสามารถทำได้ (เพราะมันC:\fakepathถูกเพิ่มเข้ามาเสมอเพื่อเหตุผลด้านความปลอดภัย):

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

คุณเพียงแค่ต้องทำรหัสด้านล่าง แรก [0] คือการเข้าถึงองค์ประกอบ HTML และที่สอง [0] คือการเข้าถึงไฟล์แรกของการอัปโหลดไฟล์ (ฉันรวมการตรวจสอบในกรณีที่ไม่มีไฟล์):

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

Chrome ส่งคืนC:\fakepath\...ด้วยเหตุผลด้านความปลอดภัย - เว็บไซต์ไม่ควรรับข้อมูลเกี่ยวกับคอมพิวเตอร์ของคุณเช่นเส้นทางไปยังไฟล์ในคอมพิวเตอร์ของคุณ

ในการรับส่วนของชื่อไฟล์ของสตริงคุณสามารถใช้split()...

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

jsFiddle

... หรือนิพจน์ทั่วไป ...

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

jsFiddle

... หรือlastIndexOf()...

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

jsFiddle

รับเส้นทางการทำงานกับระบบปฏิบัติการทั้งหมด

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

ตัวอย่าง

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

ทั้งสองกลับมา

filename.doc
filename.doc

นี่คือวิธีที่ฉันทำมันทำงานได้ค่อนข้างดี

ใน HTML ของคุณ:

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

จากนั้นในไฟล์ js ของคุณสร้างฟังก์ชั่นง่าย ๆ :

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

หากคุณกำลังทำหลายไฟล์คุณควรจะสามารถรับรายชื่อได้โดยการวนซ้ำสิ่งนี้

e.target.files[0].name

อาจจะมีบางส่วนเพื่อหลีกเลี่ยงการ 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);

แล้วเรื่องแบบนี้ล่ะ?

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

มันจะต้องมีการ jQuery? หรือคุณสามารถใช้พื้นเมืองของ JavaScript yourpath.split("\\")เพื่อแยกสตริงเป็นอาร์เรย์ได้หรือไม่

รับไฟล์แรกจากตัวควบคุมจากนั้นรับชื่อของไฟล์ไฟล์นั้นจะไม่สนใจเส้นทางของไฟล์บน Chrome และจะทำการแก้ไขเส้นทางสำหรับเบราว์เซอร์ IE ในการบันทึกไฟล์คุณต้องใช้System.io.Path.GetFileNameวิธีการรับชื่อไฟล์สำหรับเบราว์เซอร์ 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);

ทางเลือกนี้ดูเหมือนจะเหมาะสมที่สุด

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

ที่นี่คุณสามารถเรียกสิ่งนี้ได้ให้นี่คือการควบคุมไฟล์อินพุตของฉัน

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

ตอนนี้นี่คือ Jquery ของฉันที่ถูกเรียกใช้เมื่อคุณเลือกไฟล์

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

</script>

เราสามารถลบออกได้โดยใช้ match

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