جافا سكريبت - كيفية استخراج اسم الملف من عنصر تحكم إدخال الملف

StackOverflow https://stackoverflow.com/questions/857618

  •  21-08-2019
  •  | 
  •  

سؤال

عندما يقوم المستخدم بتحديد ملف في صفحة ويب، أريد أن أتمكن من استخراج اسم الملف فقط.

لقد قمت بتجربة وظيفة str.search ولكن يبدو أنها فشلت عندما يكون اسم الملف كالتالي: c:\uploads\ilike.this.file.jpg.

كيف يمكننا استخراج اسم الملف فقط بدون امتداد؟

هل كانت مفيدة؟

المحلول

على افتراض الخاص بك <نوع الإدخال = "ملف"> لديه معرف رفع نأمل أن يؤدي هذا إلى الخدعة:

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);
}

نصائح أخرى

لتقسيم السلسلة ({filepath}/{filename}) والحصول على اسم الملف، يمكنك استخدام شيء مثل هذا:

str.split(/(\\|\/)/g).pop()

"تزيل طريقة البوب ​​العنصر الأخير من صفيف ويعيد هذه القيمة إلى المتصل." شبكة مطوري موزيلا

مثال:

من: "/home/user/file.txt".split(/(\\|\/)/g).pop()

لقد حصلت: "file.txt"

في الوقت الحاضر هناك طريقة أسهل بكثير:

var fileInput = document.getElementById('upload');   
var filename = fileInput.files[0].name;

بسيط جدا 

let file = $("#fileupload")[0].files[0]; 
file.name

على افتراض:

<input type="file" name="file1" id="theFile">

جافا سكريبت ستكون:

var fileName = document.getElementById('theFile').files[0].name;

var pieces = str.split('\\');
var filename = pieces[pieces.length-1];

لقد صنعت للتو نسختي الخاصة من هذا.يمكن استخدام وظيفتي لاستخراج ما تريد منها، إذا لم تكن بحاجة إليها كلها، فيمكنك بسهولة إزالة بعض التعليمات البرمجية.

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

سوف يخرج ما يلي:

  • الملف الذي يحمل الاسم "testcase1" له امتداد:"jpeg" موجود في الدليل:'C:\blabla\blaeobuaeu'
  • الملف الذي يحمل الاسم "testcase2" له امتداد:"png" موجود في الدليل:'/تمب/بلابلا'
  • الملف الذي يحمل الاسم "testcase3" له امتداد:"htm" موجود في الدليل:''
  • يحتوي الدليل الذي يحمل الاسم "Testcase4" على الامتداد:'' موجود في الدليل:"ج:"
  • يحتوي الدليل الذي يحمل الاسم "fileWithoutDots" على الامتداد:'' موجود في الدليل:"/dir.with.dots"
  • الدليل بالاسم '' له امتداد:'' موجود في الدليل:"/dir.with.dots/other.dir"

مع && nOffset+1 === str.length مضاف إلى isDirectory:

  • الملف الذي يحمل الاسم "testcase1" له امتداد:"jpeg" موجود في الدليل:'C:\blabla\blaeobuaeu'
  • الملف الذي يحمل الاسم "testcase2" له امتداد:"png" موجود في الدليل:'/تمب/بلابلا'
  • الملف الذي يحمل الاسم "testcase3" له امتداد:"htm" موجود في الدليل:''
  • يحتوي الدليل الذي يحمل الاسم "Testcase4" على الامتداد:'' موجود في الدليل:"ج:"
  • يحتوي الدليل الذي يحمل الاسم "fileWithoutDots" على الامتداد:'' موجود في الدليل:"/dir.with.dots"
  • الدليل بالاسم '' له امتداد:'' موجود في الدليل:"/dir.with.dots/other.dir"

بالنظر إلى حالات الاختبار، يمكنك أن ترى أن هذه الوظيفة تعمل بقوة كبيرة مقارنة بالطرق الأخرى المقترحة هنا.

ملاحظة للمبتدئين حول \\:\ هو حرف هروب، على سبيل المثال يعني سطرًا جديدًا و علامة تبويب.لتتمكن من كتابة ، يجب عليك كتابة \ .

أفترض أنك تريد تجريد كافة الملحقات، أي. /tmp/test/somefile.tar.gz ل somefile.

النهج المباشر مع regex:

var filename = filepath.match(/^.*?([^\\/.]*)[^\\/]*$/)[1];

نهج بديل مع regex وتشغيل المصفوفة:

var filename = filepath.split(/[\\/]/g).pop().split('.')[0];

مدخل: C:\path\Filename.ext
انتاج |: Filename

في تعليمات HTML البرمجية، قم بتعيين الملف onChange قيمة مثل هذا...

<input type="file" name="formdata" id="formdata" onchange="setfilename(this.value)"/>

بافتراض أن معرف حقل النص الخاص بك هو "wpName"...

<input type="text" name="wpName" id="wpName">

جافا سكريبت 

<script>
  function setfilename(val)
  {
    filename = val.split('\\').pop().split('/').pop();
    filename = filename.substring(0, filename.lastIndexOf('.'));
    document.getElementById('wpName').value = filename;
  }
</script>

لا توفر أي من الإجابات التي تم التصويت عليها بشكل كبير "اسم الملف فقط بدون امتداد" والحلول الأخرى عبارة عن رمز كبير جدًا لمثل هذه المهمة البسيطة.

أعتقد أن هذا يجب أن يكون بمثابة سطر واحد لأي مبرمج جافا سكريبت.إنه تعبير عادي بسيط جدًا:

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
}

كيفية إزالة التمديد

لم تنجح معي أي من الإجابات المذكورة أعلاه، إليك الحل الذي يقوم بتحديث الإدخال المعطل باسم الملف:

<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();
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top