জাভাস্ক্রিপ্ট, 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
আমি এটি নেট এ অনুসন্ধান করেছি, তবে মনে হচ্ছে সুরক্ষার কারণে ব্রাউজারগুলি (এফএফ, ক্রোম) কেবল ফাইলটির নাম দেয়।
নির্বাচিত ফাইলটির পুরো পথ পাওয়ার জন্য অন্য কোনও উপায় আছে কি?




@ নওফাল মন্তব্যের জন্য ধন্যবাদ তবে নির্বাচিত ফাইলের পুরো পথ পাওয়ার জন্য অন্য কোনও উপায় আছে কি?
যোগেশ পিংল

1
আপনি যদি সেই ক্ষেত্রে থাকেন যেখানে আপনি সার্ভারে কোনও ফাইলের পথ পেতে চান , (উদাহরণস্বরূপ সার্ভারে চালিত কমান্ডলাইন ইউটিলিটিতে একটি ওয়েব ইন্টারফেস তৈরি করা) আপনি সর্বদা আপেক্ষিক পথটি তৈরি করতে পারেন, এটি প্রেরণ করতে পারেন <option> গুলি হিসাবে এবং একটি ট্রি উইজেট ব্যবহার করুন বা ব্যবহারকারীকে এটি নির্বাচন করতে এবং তারপরে সার্ভারটি ফাইলটি প্রক্রিয়া করার জন্য টাইপ করুন।
dardenfall

উত্তর:


164

সুরক্ষার কারণে ব্রাউজারগুলি এটির অনুমতি দেয় না, যেমন ব্রাউজারে জাভাস্ক্রিপ্টের ফাইল সিস্টেমে কোনও অ্যাক্সেস নেই, তবে এইচটিএমএল 5 ফাইল এপিআই ব্যবহার করে, কেবল ফায়ারফক্স একটি mozFullPathসম্পত্তি সরবরাহ করে, তবে আপনি যদি মানটি পেতে চেষ্টা করেন তবে এটি একটি খালি স্ট্রিং প্রদান করে:

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

http://jsfiddle.net/SCK5A/

সুতরাং আপনার সময় নষ্ট করবেন না।

সম্পাদনা: কোনও ফাইল পড়ার জন্য যদি আপনার ফাইলের পথের প্রয়োজন হয় তবে আপনি পরিবর্তে ফাইলআরডার API ব্যবহার করতে পারেন । এখানে এসও সম্পর্কিত সম্পর্কিত প্রশ্ন: কোনও চিত্র আপলোড হওয়ার আগে তার পূর্বরূপ দেখুন।


1
এটি একই সমস্যাটিতে আমাকে সহায়তা করেছিল বলে এই লিঙ্কটি দেখুন ।
আমির তুগি


এবং তবুও এটি আমাকে সার্ভারে প্রেরণের জন্য URL- পেয়েছে
আমির তুগি

1
@ আমিরতুগি এই সমাধানটি একটি ফাইল পড়ে। এটির ব্যবহারকারীর ফাইল সিস্টেমে ফাইলের পথের কোনও সম্পর্ক নেই।
undefined

সুতরাং কিভাবে এই ওয়েবসাইট এটি করতে পারে?
সৈয়দবাকআর

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

এটি আপনি যা খুঁজছিলেন ঠিক তা নয়, তবে এটি আপনাকে কোথাও সাহায্য করতে পারে।


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

আমার কি কেবল ব্রাউজারের অ্যাড্রেস বারে "টিএমপ্যাথ" লিখিত সামগ্রী রাখা দরকার? আমি চেষ্টা করেছি এবং এটি কাজ করে না।
ম্যাকগ্রুবার

@ গাংসারস্বপুরবা দুর্ভাগ্যক্রমে, এটি আই 9 তে কাজ করে না - URL.createObjectURL দেখুন ()
ন্যাক্সা

@naXa ভাল, আমি উপরে আমার মন্তব্য সম্পাদনা করব। ও, দুর্ভাগ্যক্রমে আমি আমার মন্তব্য সম্পাদনা করতে পারছি না
গ্যাঙ্গসার স্বপ্নপুর

2
তৃতীয় লাইনে আপনার URL.createObjectURL (ইভেন্ট.target.files [0]) এর পরিবর্তে tmppath পরিবর্তনশীল ব্যবহার করা উচিত, এটি আরও অনুকূলিত ized
ওয়াসাম এল মাহডি

17

আপনি এটি করতে পারবেন না - সুরক্ষা উদ্বেগের কারণে ব্রাউজারটি এটি অনুমতি দেবে না।

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

নির্বাচিত ফাইলটির সম্পূর্ণরূপে যোগ্যতাসম্পন্ন ফাইলের নামটি কেবল তখনই ফিরে আসে যখন এই সেটিংটি সক্ষম করা হবে। যখন সেটিংটি অক্ষম করা হয়, ইন্টারনেট এক্সপ্লোরার 8 অকার্যকর তথ্য প্রকাশ রোধ করার জন্য স্থানীয় ড্রাইভ এবং ডিরেক্টরি পথটি স্ট্রিং সি: \ ফ্যাকিপথ with এর সাথে প্রতিস্থাপন করে।

এবং অন্যান্য

);পরিবর্তন ইভেন্ট ফাংশন শেষে আপনি এটি মিস করেছেন।

পরিবর্তনের ইভেন্টের জন্য ফাংশন তৈরি না করে কেবল এটি নীচের মতো ব্যবহার করুন,

<script type="text/javascript">

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

</script>

19
আপনার কোড ব্যবহার করার চেষ্টা করেছেন কিন্তু এটি আমাকে ভুল পথ দেয়। আমার ফাইল Dডিরেক্টরিতে আছে তবে মান আসছেC:\fakepath\test.xls
রাহুল মুঞ্জাল

3
সি: \ নকলপথ \ fileName.xls ... কেউ কীভাবে সমাধান করবেন জানেন?
আন্দ্রে ডস সান্টোস

14

আপনি পারবেন না। সুরক্ষা আপনাকে ক্লায়েন্ট কম্পিউটারের ফাইলিং সিস্টেম সম্পর্কে কিছু জানার জন্য থামিয়ে দেয় - এটির একটিও নাও থাকতে পারে! এটি কোনও ম্যাক, একটি পিসি, একটি ট্যাবলেট বা ইন্টারনেট সক্ষম ফ্রিজ হতে পারে - আপনি জানেন না, জানতে পারবেন না এবং জানেন না। এবং আপনাকে পুরো পথটি দেওয়া আপনাকে ক্লায়েন্ট সম্পর্কে কিছু তথ্য দিতে পারে - বিশেষত যদি এটি কোনও নেটওয়ার্ক ড্রাইভ হয়।

প্রকৃতপক্ষে আপনি এটিকে নির্দিষ্ট অবস্থার অধীনে পেতে পারেন তবে এটির জন্য একটি অ্যাক্টিভ এক্স নিয়ন্ত্রণ প্রয়োজন এবং এটি 99.99% পরিস্থিতিতে কাজ করবে না।

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



7

আপলোড করা ফাইলটির জন্য আপনি একটি কার্যকারী স্থানীয় URL পেতে নিম্নলিখিত কোডটি ব্যবহার করতে পারেন:

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

4

একটি আকর্ষণীয় নোট: যদিও এটি ওয়েবে পাওয়া যায় না, আপনি যদি ইলেক্ট্রনে জেএস ব্যবহার করেন তবে আপনি এটি করতে পারেন।

স্ট্যান্ডার্ড এইচটিএমএল 5 ফাইল ইনপুট ব্যবহার করে, আপনি 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

আপনার কখনই এটি করা উচিত নয় ... এবং আমি মনে করি সর্বশেষ ব্রাউজারগুলিতে এটি চেষ্টা করা নিষ্ক্রিয় (আমি জানি যা থেকে) ... অন্যদিকে সমস্ত সাম্প্রতিক ব্রাউজারগুলি এটি অনুমতি দেবে না ...

মান সার্ভারসাইড পাওয়ার মতো কাজ করার জন্য, তবে ক্লায়েন্টাইডে নয় (জাভাস্ক্রিপ্ট)

ফায়ারফক্স 3-এ এইচটিএমএল ইনপুট ফর্ম থেকে ফাইল পাথ কীভাবে পাবেন সে জন্য jQuery ব্যবহার করে ফাইল ইনপুট থেকে সম্পূর্ণ পথ


-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

আপনি কেবল আইই 11 এবং এমএস এজ দ্বারা আপলোড করার জন্য নির্বাচিত ফাইলের পুরো পথটি পেতে পারেন।

var fullPath = Request.Form.Files["myFile"].FileName;
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.