पथ के बिना फ़ाइल इनपुट के चयनित फ़ाइल नाम को प्राप्त करने के लिए jQuery का उपयोग करें

Question

मैंने इसका उपयोग किया:

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

फ़ाइल नाम चयनित करने के लिए, लेकिन उसने पूरा रास्ता लौटा दिया, जैसा कि "C: \ fakepath \ filename.doc"। "नकली" भाग वास्तव में वहाँ था - यकीन है कि अगर यह होना चाहिए नहीं है, लेकिन यह मेरा पहली बार फ़ाइल अपलोड के फ़ाइल नाम के साथ काम कर रहा है।

मैं फ़ाइल का नाम (filename.doc) कैसे प्राप्त कर सकता हूं?

Comments

ब्राउज़र वास्तविक पथ को बदल देता है C:\fakepath\ ताकि दुर्भावनापूर्ण साइटें आपके कंप्यूटर की निर्देशिका संरचना के बारे में जानकारी के लिए जावास्क्रिप्ट का उपयोग न कर सकें।

— परिश्रम से काम करना

Answer 1

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

या आप बस कर सकते हैं (क्योंकि यह हमेशा C:\fakepathसुरक्षा कारणों से जोड़ा जाता है):

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

Comments

बिल्कुल मुझे क्या चाहिए, मांजी! मुझे एक्सटेंशन की जांच करने की भी आवश्यकता है, इसलिए मैंने आपके उदाहरण का इस तरह उपयोग किया: var extension = filename.split ('।') पॉप (); वह भी पाने के लिए! धन्यवाद!

— अंक

यह Fakepathएक राजधानी एफ के साथ है?

— एलेक्स

@ मायकेडिमोन मैंने स्प्लिट ('\\') का परीक्षण किया है। पॉप (); विन 7, उबंटू 11.04 और मैक ओएस एक्स पर और यह उन सभी पर ठीक काम करता है।

— एलेक्स

@ एलेक्स: वाह, यह बहुत पागल है। तो यह वास्तव में किसी के खराब जेएस कोड के लिए सिर्फ एक समाधान है जिस तरह से वापस तय नहीं किया जाएगा। मैं एक मैक पर सफारी चला रहा हूं, और मैं वहां "C: \ fakepath \" देखता हूं। (इसके साथ jsfiddle में खेलते हैं ।)

— माइक डीस्मोन

@ VítorBaptista विंडोज फाइलें उनके नाम में बैकस्लैश नहीं हो सकती हैं। यह MacOS पर संभव है, हालांकि "आपको फ़ाइलों और फ़ोल्डरों के नाम में कॉलन और स्लैश का उपयोग करने से बचना चाहिए क्योंकि कुछ ऑपरेटिंग सिस्टम और ड्राइव प्रारूप इन वर्णों को निर्देशिका विभाजकों के रूप में उपयोग करते हैं" जैसा कि एप्पल की वेबसाइट

— joao.arruda

Answer 2

आपको बस नीचे दिए गए कोड को करने की आवश्यकता है। पहला [0] HTML एलिमेंट एक्सेस करने के लिए है और दूसरा [0] फाइल अपलोड की पहली फाइल एक्सेस करने के लिए है (मैंने इस बात की पुष्टि की है कि कोई फाइल नहीं है):

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

Comments

इस विकल्प का उपयोग करते समय एक बात पर विचार करें: जब आप खुली फ़ाइल विंडो को ऊपर लाने के लिए 'फ़ाइल चुनें' बटन पर फिर से क्लिक करते हैं, तो बच बटन पर क्लिक करें, एक कंसोल त्रुटि डाली जाएगी।

— luke_mclachlan

हां, आप सही हैं, लेकिन इरादा सिर्फ नाम पाने के लिए कोड डाल रहा था क्योंकि जैसे-जैसे कोड को कठिन कोडित स्थिति से नाम मिल रहा है, यह आवश्यक होगा कि कुछ फ़ाइल है (इस मामले के लिए हम बात कर रहे हैं) केवल एक फ़ाइल, लेकिन अधिक हो सकती है और कोड को सभी तत्वों द्वारा पुनरावृति करने की आवश्यकता होगी)। लेकिन यकीन है, मैं कोड को अपडेट करने जा रहा हूं और इस सत्यापन को शामिल करता हूं।

— डिएगो कोटिनी

Answer 3

C:\fakepath\...सुरक्षा कारणों से क्रोम रिटर्न - एक वेबसाइट को आपके कंप्यूटर के बारे में जानकारी प्राप्त करने में सक्षम नहीं होना चाहिए जैसे कि आपके कंप्यूटर पर फ़ाइल का पथ।

एक स्ट्रिंग का सिर्फ फ़ाइल नाम भाग पाने के लिए, आप उपयोग कर सकते हैं split()...

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

jsFiddle ।

... या एक नियमित अभिव्यक्ति ...

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

jsFiddle ।

... और lastIndexOf()...

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

jsFiddle ।

Answer 4

सभी ओएस के साथ पथ का काम करें

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

उदाहरण

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

दोनों लौट आए

filename.doc
filename.doc

Comments

उदाहरण कोड var filename = $('input[type=file]').val().replace(/.*(\/|\\)/, '');jQuery का उपयोग कर रहा है।

— ज़ेरेफेथ

Answer 5

यहाँ है कि मैं इसे कैसे करता हूं, यह बहुत अच्छी तरह से काम करता है।

अपने 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

Comments

चूंकि फ़ील्ड आईडी इस संदर्भ में कुछ भी नहीं करती है, जेएस में फ़ंक्शन में 1 पैरामीटर कम होना चाहिए, बस फ़ाइल के बजाय e (फ़ाइल, आईडी) केवल fileSelect (e)। हालांकि समाधान के लिए धन्यवाद :)।

— जैस्पर लंकोरहस्ट

Answer 6

नकलीपन से बचने के लिए शायद कुछ अतिरिक्त:

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

Answer 7

इस जैसे किसी और के बारे में क्या राय है?

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

Answer 8

क्या यह jquery होना चाहिए? या आप yourpath.split("\\")स्ट्रिंग को एक सरणी में विभाजित करने के लिए जावास्क्रिप्ट का उपयोग कर सकते हैं ?

Answer 9

पहली फ़ाइल नियंत्रण से प्राप्त करें और फिर फ़ाइल का नाम प्राप्त करें, यह क्रोम पर फ़ाइल पथ को अनदेखा कर देगा, और 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; 
} 

Answer 10

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

Answer 11

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

Answer 12

यह विकल्प सबसे उपयुक्त लगता है।

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

Answer 13

यहां आप इस तरह से कॉल कर सकते हैं लेट दिस इज माय इनपुट फाइल कंट्रोल

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

Answer 14

हम इसका उपयोग करके भी निकाल सकते हैं match

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