পাথ ছাড়াই ফাইল ইনপুটটির নির্বাচিত ফাইলের নাম পেতে jQuery ব্যবহার করুন


153

আমি এটি ব্যবহার করেছি:

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

ফাইলের নামটি নির্বাচিত করার জন্য, তবে এটি "সি: \ ফেইকপথ \ ফাইলের নাম.ডোক" এর মতো পুরো পথটি ফিরিয়ে দিয়েছে। "নকলপথ" অংশটি আসলে সেখানে ছিল - এটি হওয়ার কথা কিনা তা নিশ্চিত নয় তবে ফাইল আপলোডগুলির ফাইল নাম নিয়ে এটি আমার প্রথম কাজ।

আমি কীভাবে কেবল ফাইলের নাম (filename.doc) পেতে পারি?


11
ব্রাউজারটি আসল পথে পরিবর্তিত করে C:\fakepath\ তাই দূষিত সাইটগুলি আপনার কম্পিউটারের ডিরেক্টরি কাঠামো সম্পর্কে তথ্য সংগ্রহ করতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারে না।
উঁচ্ছবৃত্তি করা

উত্তর:


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

বা আপনি ঠিক করতে পারেন (কারণ এটি সুরক্ষার কারণে এটি সর্বদা C:\fakepathযুক্ত হয়):

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

1
ঠিক আমার যা দরকার ছিল, মনজি! আমারও এক্সটেনশনটি পরীক্ষা করা দরকার, সুতরাং আমি আপনার উদাহরণটি এইভাবে ব্যবহার করেছি: var এক্সটেনশন = ফাইল নাম.স্প্লিট ('।')। পপ (); তাও পেতে! ধন্যবাদ!
marky

এটি Fakepathএকটি মূলধন এফ সঙ্গে?
অ্যালেক্স

16
@ মাইকডিসিমোন আমি বিভাজন পরীক্ষা করেছি ('\\')। পপ (); উইন 7, উবুন্টু 11.04 এবং ম্যাক ওএস এক্সে এবং এটি তাদের সকলের জন্য দুর্দান্ত কাজ করে।
অ্যালেক্স

3
@ অ্যালেক্স: বাহ, বেশ পাগল। সুতরাং এটি সত্যিই কেবল ফিরে যাওয়ার পথে থেকে খারাপ ব্যক্তির খারাপ জেএস কোডের একমাত্র কাজ যা কখনই স্থির হবে না। আমি একটি ম্যাকের উপর সাফারি চালাচ্ছি এবং আমি সেখানে "সি: \ নকলপথ \" দেখছি। (এটি জিসফিডেলে খেলুন ))
মাইক ডিসিমোন

1
@ ভেটরবাপটিস্টা উইন্ডোজ ফাইলগুলির নামে ব্যাকস্ল্যাশ থাকতে পারে না। ম্যাকোএসে এটি সম্ভব যদিও "আপনার ফাইল এবং ফোল্ডারগুলির নামে কলোন এবং স্ল্যাশ ব্যবহার করা এড়ানো উচিত কারণ কিছু অপারেটিং সিস্টেম এবং ড্রাইভ ফর্ম্যাটগুলি এই অক্ষরগুলি ডিরেক্টরি বিভাজক হিসাবে ব্যবহার করে" অ্যাপলের ওয়েবসাইটে
joao.arruda

68

আপনাকে কেবল নীচের কোডটি করতে হবে। প্রথম [0] হ'ল এইচটিএমএল উপাদান অ্যাক্সেস করা এবং দ্বিতীয় [0] হ'ল ফাইল আপলোডের প্রথম ফাইলটি অ্যাক্সেস করা (আমি কোনও ফাইল না থাকায় একটি বৈধতা অন্তর্ভুক্ত করেছি):

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

1
এই বিকল্পটি ব্যবহার করার সময় একটি বিষয় বিবেচনা করতে হবে: খোলা ফাইল উইন্ডোটি উপস্থাপনের জন্য যখন আপনি আবার 'ফাইল চয়ন করুন' বোতামে ক্লিক করেন, তারপরে পালানোর বোতামটিতে ক্লিক করুন, একটি কনসোল ত্রুটি নিক্ষেপ করা হবে।
luke_mclachlan

হ্যাঁ, আপনি ঠিক বলেছেন, তবে নামটি সনাক্ত করার জন্য উদ্দেশ্যটি কেবল কোডটি রেখেছিল কারণ কোডটি একটি হার্ড কোডিং অবস্থান থেকে নামটি পাচ্ছে কারণ কোনও ফাইল রয়েছে কিনা তা পরীক্ষা করা প্রয়োজন (এই ক্ষেত্রে আমরা যার সাথে কথা বলছি) কেবল একটি ফাইল, তবে আরও থাকতে পারে এবং কোডটি সমস্ত উপাদান দ্বারা পুনরাবৃত্তি করতে হবে)। তবে নিশ্চিত, আমি কোডটি আপডেট করতে যাচ্ছি এবং এই বৈধতাটি অন্তর্ভুক্ত করব।
ডিয়েগো কোটিনি

23

C:\fakepath\...সুরক্ষার কারণে ক্রোম ফিরিয়ে দেয় - কোনও ওয়েবসাইট আপনার কম্পিউটার সম্পর্কিত তথ্য যেমন আপনার কম্পিউটারে কোনও ফাইলের পথে পাবে না তা সক্ষম হওয়া উচিত।

স্ট্রিংয়ের কেবল ফাইল নাম অংশ পেতে, আপনি ব্যবহার করতে পারেন split()...

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

jsFizz

... বা একটি নিয়মিত প্রকাশ ...

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

jsFizz

... বা lastIndexOf()...

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

jsFizz


21

সমস্ত ওএসের সাথে পাথের কাজ পান

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

উদাহরণ

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

দুজনেই ফিরবে

filename.doc
filename.doc

উদাহরণ কোডটি var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');jQuery ব্যবহার করছে।
জেরেফেথ

13

এখানে আমি এটি কীভাবে করি এটি বেশ ভাল কাজ করে।

আপনার এইচটিএমএল করতে:

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

তারপরে আপনার জেএস ফাইলটিতে একটি সাধারণ ফাংশন তৈরি করুন:

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

আপনি যদি একাধিক ফাইল করছেন তবে আপনার এটিকে লুপ করেও তালিকাটি পেতে সক্ষম হবেন:

e.target.files[0].name

যেহেতু ফিল্ড আইডি এই প্রসঙ্গে কিছুই না, জেএসের ফাংশনে 1 প্যারামিটার কম হওয়া উচিত, কেবল ফাইলসিলিট (আইডি, ই) এর পরিবর্তে কেবল ফাইলসিলিট (ই)। যদিও সমাধানের জন্য ধন্যবাদ :)।
জ্যাস্পার ল্যানখোরস্ট

8

জালপথ এড়ানোর জন্য কিছু সংযোজন হতে পারে:

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


4

এটি jquery হতে হবে? অথবা আপনি কেবল জাভাস্ক্রিপ্টের নেটিভ ব্যবহার করে yourpath.split("\\")স্ট্রিংটিকে একটি অ্যারেতে বিভক্ত করতে পারেন?


3

নিয়ন্ত্রণ থেকে প্রথম ফাইলটি পান এবং তারপরে ফাইলটির নাম পান, এটি Chrome এ ফাইলের পথটিকে উপেক্ষা করবে এবং আই ব্রাউজারগুলির জন্য পাথ সংশোধন করবে। ফাইলটি সংরক্ষণ করার সময়, System.io.Path.GetFileNameকেবলমাত্র আইই ব্রাউজারগুলির জন্য ফাইলের নাম পেতে আপনাকে পদ্ধতি ব্যবহার করতে হবে

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

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


1

এই বিকল্পটি সবচেয়ে উপযুক্ত বলে মনে হচ্ছে।

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

0

এখানে আপনি এই জাতীয় কল করতে পারেন এটি আমার ইনপুট ফাইল নিয়ন্ত্রণ

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

এখন এখানে আমার জিকিউরি যা একবার আপনি ফাইলটি নির্বাচন করার পরে কল করা হয়

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

</script>

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.