जावास्क्रिप्ट, jquery-ajax का उपयोग करके <इनपुट प्रकार = 'फ़ाइल'> के परिवर्तन पर चयनित फ़ाइल का पूर्ण पथ कैसे प्राप्त करें?


240

फ़ाइल का उपयोग करते समय फ़ाइल का पूर्ण पथ कैसे प्राप्त करें <input type=‘file’>

<input type="file" id="fileUpload">
<script type="text/javascript">
function getFilePath(){
     $('input[type=file]').change(function () {
         var filePath=$('#fileUpload').val(); 
     });
}
</script>

लेकिन फ़ाइलपथ संस्करण में only nameचयनित फ़ाइल शामिल है, नहीं full path
मैंने इसे नेट पर खोजा, लेकिन ऐसा लगता है कि सुरक्षा कारणों से ब्राउज़र (एफएफ, क्रोम) सिर्फ फ़ाइल का नाम देते हैं।
क्या चयनित फ़ाइल का पूर्ण पथ प्राप्त करने का कोई अन्य तरीका है?




@nauphal टिप्पणी के लिए धन्यवाद, लेकिन क्या चयनित फ़ाइल का पूरा रास्ता पाने का कोई अन्य तरीका है?
योगेश पिंगले

1
यदि आप उस स्थिति में हैं जहाँ आप सर्वर पर फ़ाइल का पथ प्राप्त करना चाहते हैं , (उदाहरण के लिए सर्वर पर चलने के लिए कमांडलाइन उपयोगिता के लिए वेब इंटरफ़ेस का निर्माण) तो आप हमेशा सापेक्ष पथ बना सकते हैं, इसे भेजें जैसा कि <विकल्प> है और उपयोगकर्ता को चुनने के लिए ट्री विजेट या टाइप का उपयोग करें और फिर फ़ाइल को सर्वर प्रोसेस करें।
dardenfall

जवाबों:


164

सुरक्षा कारणों से ब्राउज़र इसे अनुमति नहीं देते हैं, अर्थात ब्राउज़र में जावास्क्रिप्ट का फ़ाइल सिस्टम तक कोई पहुँच नहीं है, हालांकि HTML5 फ़ाइल एपीआई का उपयोग करके, केवल फ़ायरफ़ॉक्स एक mozFullPathसंपत्ति प्रदान करता है , लेकिन यदि आप मान प्राप्त करने का प्रयास करते हैं तो यह एक खाली स्ट्रिंग लौटाता है:

$('input[type=file]').change(function () {
    console.log(this.files[0].mozFullPath);
});

http://jsfiddle.net/SCK5A/

तो अपना समय बर्बाद मत करो।

संपादित करें: यदि आपको फ़ाइल पढ़ने के लिए फ़ाइल के पथ की आवश्यकता है, तो आप इसके बजाय FileReader API का उपयोग कर सकते हैं । यहाँ SO पर एक संबंधित प्रश्न है: किसी चित्र को अपलोड करने से पहले उसका पूर्वावलोकन करें।


1
इस लिंक को देखें क्योंकि इससे मुझे उसी मुद्दे पर मदद मिली।
अमीर तुगी


और फिर भी यह मुझे सर्वर पर भेजने के लिए पथ के लिए यूआरएल मिला
अमीर तुगी

1
@AmirTugi वह समाधान एक फ़ाइल पढ़ता है। इसका उपयोगकर्ता के फाइल सिस्टम पर फ़ाइल के पथ से कोई लेना-देना नहीं है।
अपरिभाषित

तो यह वेबसाइट कैसे कर सकती है?
सईदबाकरा

102

इसे इस्तेमाल करे:

यह आपको सही रास्ता नहीं देगा, आपको एक अस्थायी रास्ता देगा, आप इस स्क्रिप्ट का उपयोग कर सकते हैं यदि आप इस jsfiddle उदाहरण में चयनित चित्र दिखाना चाहते हैं (इसे छवियों के साथ-साथ अन्य फ़ाइलों द्वारा भी आज़माएं): -

JSFIDDLE

यहाँ कोड है: -

एचटीएमएल: -

<input type="file" id="i_file" value=""> 
<input type="button" id="i_submit" value="Submit">
<br>
<img src="" width="200" style="display:none;" />
<br>
<div id="disp_tmp_path"></div>

जे एस: -

$('#i_file').change( function(event) {
    var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',URL.createObjectURL(event.target.files[0]));

    $("#disp_tmp_path").html("Temporary Path(Copy it and try pasting it in browser address bar) --> <strong>["+tmppath+"]</strong>");
});

इसकी ठीक वही नहीं है जो आप ढूंढ रहे थे, लेकिन हो सकता है कि यह आपकी कहीं मदद कर सके।


क्या अन्य फ़ाइल प्रकारों के साथ ऐसा करने का कोई तरीका है: pdf, docx, इत्यादि और छवि के बजाय एक आइकन दिखाओ? मेरे उपयोगों के लिए मैं पृष्ठ पर फ़ाइलों को संग्रहीत करना चाहता हूं इससे पहले कि मैं उन्हें उपयोगकर्ता को एक पाठ के साथ एक संदेश की तरह लोड करने के लिए एक टिप्पणी जोड़ने का मौका देने के लिए भेज दूं।
user1040975

क्या मुझे ब्राउज़र पता बार में "tmppath" की सामग्री डालने की आवश्यकता है? मैंने कोशिश की और यह काम नहीं करता है।
मैकग्रुबर

@GangsarSwaPurba दुर्भाग्य से, यह IE9 में काम नहीं करता है - URL.createObjectURL () देखें
naXa

@naXa अच्छा, मैं अपनी टिप्पणी ऊपर संपादित करूंगा। uw, दुर्भाग्य से मैं अपनी टिप्पणी संपादित नहीं कर सकता
गंगासर स्वपर्बा

2
तीसरी पंक्ति में आपको URL.createObjectURL (event.target.files [0]) के बजाय tmppath चर का उपयोग करना चाहिए, यह अधिक अनुकूलित है।
वेसम एल मह्डी

17

आप ऐसा नहीं कर सकते - सुरक्षा चिंताओं के कारण ब्राउज़र इसकी अनुमति नहीं देगा।

जब इनपुट प्रकार = फ़ाइल ऑब्जेक्ट का उपयोग करके एक फ़ाइल का चयन किया जाता है, तो मूल्य संपत्ति का मूल्य "सर्वर पर फाइलें अपलोड करते समय स्थानीय निर्देशिका पथ शामिल करें" के मूल्य पर निर्भर करता है "वेब पेज को प्रदर्शित करने के लिए उपयोग किए जाने वाले सुरक्षा क्षेत्र के लिए सुरक्षा सेटिंग। इनपुट ऑब्जेक्ट युक्त।

चयनित फ़ाइल का पूरी तरह से योग्य फ़ाइल नाम केवल तभी दिया जाता है जब यह सेटिंग सक्षम हो। जब सेटिंग अक्षम हो जाती है, तो अनुचित जानकारी प्रकटीकरण को रोकने के लिए Internet Explorer 8 स्थानीय ड्राइव और निर्देशिका पथ को स्ट्रिंग C: \ fakepath \ के साथ बदल देता है।

और दूसरा

आपने );परिवर्तन ईवेंट फ़ंक्शन के अंत में इसे याद किया ।

इसके अलावा परिवर्तन की घटना के लिए फ़ंक्शन न बनाएं, केवल नीचे के रूप में उपयोग करें,

<script type="text/javascript">

    $(function()
    {
        $('#fileUpload').on('change',function ()
        {
            var filePath = $(this).val();
            console.log(filePath);
        });
    });

</script>

19
अपने कोड की कोशिश की, लेकिन यह मुझे गलत रास्ता दे रहा है। मेरी फाइल Dडायरेक्टरी में है, लेकिन वैल्यू आ रही हैC:\fakepath\test.xls
राहुल मुंजाल

3
C: \ fakepath \ fileName.xls ... किसी को पता है कि इसे कैसे हल किया जाए?
एंड्रे डॉस सैंटोस

14

आप नहीं कर सकते। क्लाइंट कंप्यूटर के फाइलिंग सिस्टम के बारे में कुछ भी जानने के लिए सुरक्षा आपको रोक देती है - यह एक भी नहीं हो सकता है! यह एक मैक, एक पीसी, एक टैबलेट या एक इंटरनेट सक्षम फ्रिज हो सकता है - आपको पता नहीं है, पता नहीं है और पता नहीं चलेगा। और आपके पास पूरा रास्ता होने से आपको क्लाइंट के बारे में कुछ जानकारी मिल सकती है - खासकर अगर यह उदाहरण के लिए नेटवर्क ड्राइव है।

वास्तव में आप इसे विशेष परिस्थितियों में प्राप्त कर सकते हैं, लेकिन इसके लिए एक ActiveX नियंत्रण की आवश्यकता होती है, और 99.99% परिस्थितियों में काम नहीं करेगा।

आप वैसे भी मूल स्थान पर फ़ाइल को पुनर्स्थापित करने के लिए इसका उपयोग नहीं कर सकते हैं (जैसा कि आपके पास बिल्कुल कोई नियंत्रण नहीं है कि डाउनलोड कहाँ संग्रहीत हैं, या यहां तक ​​कि अगर वे संग्रहीत हैं) तो व्यवहार में यह आपके लिए वैसे भी बहुत अधिक उपयोग नहीं है।


11

क्या आपका यह मतलब था?

$('#i_file').change( function(event) {
var tmppath = URL.createObjectURL(event.target.files[0]);
    $("img").fadeIn("fast").attr('src',tmppath);       
});

4
यह फ़ाइल को पथ नहीं देता है। इतनी बार क्यों उखाड़ा गया?
फ्लोयू। SimpleUITesting.com

7

अपलोड की गई फ़ाइल के लिए एक स्थानीय URL प्राप्त करने के लिए आप निम्न कोड का उपयोग कर सकते हैं:

<script type="text/javascript">    
    var path = (window.URL || window.webkitURL).createObjectURL(file);
    console.log('path', path);
</script>

4

एक दिलचस्प टिप्पणी: हालाँकि यह वेब पर उपलब्ध नहीं है, यदि आप जेएस का उपयोग कर रहे हैं तो आप ऐसा कर सकते हैं।

मानक HTML5 फ़ाइल इनपुट का उपयोग करके, आपको pathचयनित फ़ाइलों पर एक अतिरिक्त संपत्ति प्राप्त होगी , जिसमें वास्तविक फ़ाइल पथ होगा।

यहां पूर्ण डॉक्स: https://github.com/electron/electron/blob/master/docs/api/file-object.md


1

यदि आप एक संपूर्ण फ़ोल्डर अपलोड कर रहे हैं, तो आप एक विकल्प हो सकते हैं

<input type="file" webkitdirectory directory multiple/>

परिवर्तन घटना में शामिल होंगे:

.target.files[...].webkitRelativePath: "FOLDER/FILE.ext"

1

आपको ऐसा कभी नहीं करना चाहिए ... और मुझे लगता है कि नवीनतम ब्राउज़रों में इसे आज़माना बेकार है (जो मुझे पता है) ... दूसरी ओर सभी नवीनतम ब्राउज़र, इसकी अनुमति नहीं देंगे ...

कुछ अन्य लिंक जो आप के माध्यम से जा सकते हैं, मान सर्वराइड प्राप्त करने की तरह एक वर्कअराउंड खोजने के लिए, लेकिन क्लाइंटसाइड में नहीं (जावास्क्रिप्ट)

JQuery का उपयोग करके फ़ाइल इनपुट से पूर्ण पथ
फ़ायरफ़ॉक्स 3 में HTML इनपुट फॉर्म से फ़ाइल पथ कैसे प्राप्त करें


-1

फ़ाइल तत्व है और सरणी कॉल में filesयह आवश्यक सभी आवश्यक सामान शामिल हैं

var file = document.getElementById("upload");

file.addEventListener("change", function() {
    for (var i = 0; i < file.files.length; i++) {
        console.log(file.files[i].name);
    }
}, false);

2
यह अपलोड की गई फ़ाइल का पूर्ण पथ प्रदान नहीं करता है।
सेरगुई मारे

-3

आप केवल IE11 और MS Edge द्वारा अपलोड करने के लिए चयनित फ़ाइल का पूर्ण पथ प्राप्त कर सकते हैं।

var fullPath = Request.Form.Files["myFile"].FileName;
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.