เมื่อผู้ใช้เลือกไฟล์ในเว็บเพจฉันต้องการที่จะสามารถแยกเฉพาะชื่อไฟล์
ฉันได้ลองฟังก์ชั่น str.search แต่ดูเหมือนว่าจะล้มเหลวเมื่อชื่อไฟล์เป็นอะไรเช่นนี้C: \ อัปโหลด \ ilike.this.file.jpg
เราจะแยกเฉพาะชื่อไฟล์ที่ไม่มีนามสกุลได้อย่างไร?
เมื่อผู้ใช้เลือกไฟล์ในเว็บเพจฉันต้องการที่จะสามารถแยกเฉพาะชื่อไฟล์
ฉันได้ลองฟังก์ชั่น str.search แต่ดูเหมือนว่าจะล้มเหลวเมื่อชื่อไฟล์เป็นอะไรเช่นนี้C: \ อัปโหลด \ ilike.this.file.jpg
เราจะแยกเฉพาะชื่อไฟล์ที่ไม่มีนามสกุลได้อย่างไร?
คำตอบ:
สมมติว่า<input type = "file"> ของคุณมี id ของการอัปโหลดหวังว่าจะทำเคล็ดลับได้:
var fullPath = document.getElementById('upload').value;
if (fullPath) {
var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
var filename = fullPath.substring(startIndex);
if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
filename = filename.substring(1);
}
alert(filename);
}filename = filename.substring(0, filename.lastIndexOf('.'));เนื่องจากทางของเขาจะล้มเหลวเมื่อมีส่วนขยายที่มีอักขระมากกว่า 3 ตัวดังนั้น: .html, .jpeg และอื่น ๆ
var startIndex = Math.max(fullPath.lastIndexOf('\\'), fullPath.lastIndexOf('/')) + 1;
ในการแยกสตริง ({filepath} / {filename}) และรับชื่อไฟล์คุณสามารถใช้ดังนี้:
str.split(/(\\|\/)/g).pop()"วิธีการป๊อปจะลบองค์ประกอบสุดท้ายออกจากอาร์เรย์และส่งคืนค่านั้นให้กับผู้เรียก"
Mozilla Developer Network
ตัวอย่าง:
จาก: "/home/user/file.txt".split(/(\\|\/)/g).pop()
คุณได้รับ: "file.txt"
var filename = filepath.replace(/^.*?([^\\\/]*)$/, '$1');
[\\/]ได้ นอกจากนี้ยังมีการขอให้แยกนามสกุลไฟล์ด้วย สำหรับวิธีแก้ปัญหาที่สมบูรณ์โปรดดู: stackoverflow.com/a/32156800/19163
ปัจจุบันมีวิธีที่ง่ายกว่านั้นมาก:
var fileInput = document.getElementById('upload');
var filename = fileInput.files[0].name;fileInput.files.lengthก่อนโทร.nameในกรณีที่ผู้ใช้คลิกยกเลิก
ง่ายมาก
let file = $("#fileupload")[0].files[0];
file.nameสมมติว่า:
<input type="file" name="file1" id="theFile">JavaScript จะเป็น:
var fileName = document.getElementById('theFile').files[0].name;var pieces = str.split('\\');
var filename = pieces[pieces.length-1];ผมถือว่าคุณต้องการที่จะตัดส่วนขยายทั้งหมดคือการ/tmp/test/somefile.tar.gzsomefile
แนวทางโดยตรงกับ regex:
var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];แนวทางทางเลือกที่มีการดำเนินการ regex และอาร์เรย์:
var filename = filepath.split(/[\\/]/g).pop().split('.')[0];ฉันเพิ่งสร้างเวอร์ชันของฉันเอง ฟังก์ชั่นของฉันสามารถใช้เพื่อแยกสิ่งที่คุณต้องการจากมันหากคุณไม่ต้องการทั้งหมดคุณก็สามารถลบโค้ดบางส่วนออกได้อย่างง่ายดาย
<html>
<body>
<script type="text/javascript">
// Useful function to separate path name and extension from full path string
function pathToFile(str)
{
var nOffset = Math.max(0, Math.max(str.lastIndexOf('\\'), str.lastIndexOf('/')));
var eOffset = str.lastIndexOf('.');
if(eOffset < 0 && eOffset < nOffset)
{
eOffset = str.length;
}
return {isDirectory: eOffset === str.length, // Optionally: && nOffset+1 === str.length if trailing slash means dir, and otherwise always file
path: str.substring(0, nOffset),
name: str.substring(nOffset > 0 ? nOffset + 1 : nOffset, eOffset),
extension: str.substring(eOffset > 0 ? eOffset + 1 : eOffset, str.length)};
}
// Testing the function
var testcases = [
"C:\\blabla\\blaeobuaeu\\testcase1.jpeg",
"/tmp/blabla/testcase2.png",
"testcase3.htm",
"C:\\Testcase4", "/dir.with.dots/fileWithoutDots",
"/dir.with.dots/another.dir/"
];
for(var i=0;i<testcases.length;i++)
{
var file = pathToFile(testcases[i]);
document.write("- " + (file.isDirectory ? "Directory" : "File") + " with name '" + file.name + "' has extension: '" + file.extension + "' is in directory: '" + file.path + "'<br />");
}
</script>
</body>
</html>จะแสดงผลลัพธ์ต่อไปนี้:
ด้วย&& nOffset+1 === str.lengthการเพิ่มในisDirectory:
จากผลการทดสอบคุณจะเห็นว่าฟังก์ชันนี้ทำงานได้ค่อนข้างดีเมื่อเทียบกับวิธีการอื่น ๆ ที่เสนอไว้ที่นี่
หมายเหตุสำหรับมือใหม่เกี่ยวกับ \\: \ คืออักขระหลีกเช่น \ n หมายถึงบรรทัดใหม่และแท็บ \ ta เพื่อให้สามารถเขียนได้ \ n คุณต้องพิมพ์ \\ n
&& eOffset < nOffset)
อินพุต : C:\path\Filename.ext
เอาต์พุต :Filename
ในโค้ด HTML ตั้งค่า File เป็นonChangeแบบนี้ ...
<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>สมมติว่ารหัสฟิลด์ข้อความของคุณคือ 'wpName' ...
<input type="text" name="wpName" id="wpName">JavaScript
<script>
function setfilename(val)
{
filename = val.split('\\').pop().split('/').pop();
filename = filename.substring(0, filename.lastIndexOf('.'));
document.getElementById('wpName').value = filename;
}
</script>คำตอบที่ได้รับการโหวตสูงทั้งสองไม่ได้ให้ "เพียงชื่อไฟล์ที่ไม่มีนามสกุล" และวิธีแก้ปัญหาอื่น ๆ นั้นมีรหัสมากเกินไปสำหรับงานง่ายๆเช่นนี้
ฉันคิดว่านี่ควรเป็นซับเดียวสำหรับโปรแกรมเมอร์ JavaScript ทุกคน มันเป็นนิพจน์ทั่วไปที่ง่ายมาก:
function basename(prevname) {
return prevname.replace(/^(.*[/\\])?/, '').replace(/(\.[^.]*)$/, '');
}ขั้นแรกให้ตัดอะไรก็ได้จนถึงเครื่องหมายทับสุดท้ายถ้ามี
จากนั้นให้ตัดสิ่งใด ๆ ออกหลังจากช่วงเวลาสุดท้ายถ้ามี
มันง่ายมันแข็งแกร่งมันใช้สิ่งที่ขอ ฉันพลาดอะไรไปรึเปล่า?
// HTML
<input type="file" onchange="getFileName(this)">
// JS
function getFileName(input) {
console.log(input.files[0].name) // With extension
console.log(input.files[0].name.replace(/\.[^/.]+$/, '')) // Without extension
}var path = document.getElementById('upload').value;//take path
var tokens= path.split('\\');//split path
var filename = tokens[tokens.length-1];//take file nameคำตอบข้างต้นไม่ได้ผลสำหรับฉันนี่คือวิธีแก้ปัญหาของฉันซึ่งอัปเดตอินพุตที่ปิดใช้งานด้วยชื่อไฟล์:
<script type="text/javascript">
document.getElementById('img_name').onchange = function () {
var filePath = this.value;
if (filePath) {
var fileName = filePath.replace(/^.*?([^\\\/]*)$/, '$1');
document.getElementById('img_name_input').value = fileName;
}
};
</script>หากคุณใช้ jQuery แล้ว
$("#fileupload").val();