জাভাস্ক্রিপ্টে ফাইল ডায়লগ বাক্স খুলুন


109

আমি HTML এ খোলা ফাইল ডায়ালগ প্রদর্শন করে যখন একটি ক্লিক একটি সমাধান প্রয়োজন divdivক্লিক করা হলে ওপেন ফাইল ডায়লগ বাক্স অবশ্যই খুলতে হবে ।

আমি HTML পৃষ্ঠার অংশ হিসাবে ইনপুট ফাইল বাক্সটি প্রদর্শন করতে চাই না। এটি অবশ্যই পৃথক কথোপকথনে প্রদর্শিত হবে যা ওয়েব পৃষ্ঠার অংশ নয়।


4
একটি সতর্কতা ফাইল-সংলাপ না? - আপনি যা জিজ্ঞাসা করছেন তা কি আপনি পরিষ্কার করতে পারেন?
লিয়ামাম

3
আমার মনে হয় তিনি বলছেন যে তিনি স্ট্যান্ডার্ড "ওপেন ফাইল" পপআপ চান
ভ্যালেন্টিন রচার

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

উত্তর:


52

এখানে একটি সুন্দর

ফাইন আপলোডার ডেমো

এটি <input type='file' />নিজেই একটি নিয়ন্ত্রণ। তবে তার উপরে একটি ডিভ স্থাপন করা হয় এবং সেই অনুভূতিটি পেতে সিএসএস শৈলী প্রয়োগ করা হয়। ফাইল নিয়ন্ত্রণের অস্বচ্ছতা 0 তে সেট করা আছে যাতে উপস্থিত হয় যে ডিভ-এ ক্লিক করার সময় ডায়ালগ উইন্ডোটি খোলা আছে।


1
জাভাস্ক্রিপ্ট দ্বারা প্রদর্শিত ফাইলগুলি নিয়ন্ত্রণ করার কোনও উপায় আছে ... বলুন যে আমি ফাইল ডায়লগটি খুলতে চেয়েছিলাম এবং .pdf দিয়ে ফাইল এক্সটেনশানটি প্রদর্শন করতে চেয়েছিলাম ..
Ajax3.14

1
@ অজ্যাক্স ৩.১৪ নতুন ব্রাউজারে ফাইলরেডার অবজেক্ট রয়েছে, পুরানো ব্রাউজারগুলি আপনার মানটি ব্যবহার করতে হবে এবং ফাইল এক্সটেনশানটি সন্ধান করবে।
ভিসারি

2
@ Ajax3.14 ফাইলরেডার বা পার্স এক্সটেনশন ব্যবহার করার দরকার নেই। অনেক ব্রাউজার ফাইল ইনপুটগুলিতে গ্রহণযোগ্য বৈশিষ্ট্য সমর্থন করে। এটি আপনাকে ফাইল ব্রাউজার সংলাপে প্রদর্শিত ফাইল ধরণের সীমাবদ্ধ করতে দেয়। ফাইন আপলোডার বৈধতা বিকল্পের গ্রহণযোগ্য ফাইলগুলির সম্পত্তি দ্বারা এই কার্যকারিতাটিতে অ্যাক্সেস সরবরাহ করে। দেখুন অপশন নথিপত্রের বৈধতা অধ্যায় আরো বিস্তারিত জানার জন্য। নোট করুন যে গ্রহণযোগ্য বৈশিষ্ট্য আইই 9 বা তার আগে সমর্থিত নয়।
রায় নিকোলাস

1
এই ভাল কিভাবে? এটা আদৌ একটা ভাল অনুশীলন? এর মতো কিছু হওয়া উচিত নয়: stackoverflow.com/a/18659941/915865 ?
ক্যাট লিম রুইজ

1
@ কেটলিমরুইজ না, আপনি যে উত্তরটি যুক্ত করেছেন এটি ভাল সমাধান নয়। আপনি যদি প্রোগ্রামযুক্তভাবেও সম্পর্কিত ফর্মটি জমা দিয়ে শেষ করেন তবে এটির জন্য একটি ত্রুটি ঘটবে।
রায় নিকোলাস

77

    $("#logo").css('opacity','0');
    
    $("#select_logo").click(function(e){
       e.preventDefault();
       $("#logo").trigger('click');
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo">

আই আই এর জন্য এটি যুক্ত করুন:

$("#logo").css('filter','alpha(opacity = 0');

3
আপনি কেন # সিলেক্ট_লগো ক্লিক হ্যান্ডলারে মিথ্যা ফিরিয়ে দিচ্ছেন?
শেঠিশ

4
এটি একটি 404 ত্রুটি তৈরি করবে না, এটি কেবল চেষ্টা করবে এবং শেষ পৃষ্ঠায় যুক্ত হওয়ার সাথে বর্তমান পৃষ্ঠায় নেভিগেট করবে। যা পৃষ্ঠায় শীর্ষে উঠবে। সুতরাং সেখানে থাকা ভাল, কেবল অন্য কারণের জন্য :)
manavo

3
যদিও আমি এটি পর্যাপ্তভাবে পরীক্ষা করে দেখিনি, "দৃশ্যমানতা: লুকানো;" আরও সামঞ্জস্যপূর্ণ বলে মনে হচ্ছে। এছাড়াও, অস্বচ্ছতা: 0 থাকা সত্ত্বেও, "অদৃশ্য" উপাদানটি ক্লিক করা হলে দৃশ্যমান: লুকানো থাকে না তবে ক্লিক ইভেন্টটি ট্রিগার করবে।
আরন

এমডিএন ইঙ্গিত করে যে document.getElementById("logo").click()এটি যথেষ্ট। তারা অন্যভাবে "ড্রাগ এবং ড্রপ" দেখায়। বিকাশকারী.মোজিলা.আর.ইন-
এরিক

2
আপনার এটিকে সাধারণ জাভাস্ক্রিপ্টে রূপান্তর করা উচিত, JQuery এরকম একটি ছোট প্রকল্পে ব্যবহার করার জন্য যৌক্তিক নয় ^ _ ^
মিস্টার স্যারকোড

57

আমি জানি না কেন কেউ এটি নির্দেশ করে নি তবে এখানে কোনও জাভাস্ক্রিপ্ট ছাড়াই এটি করার একটি উপায় এবং এটি কোনও ব্রাউজারের সাথেও উপযুক্ত।


সম্পাদনা: সাফারিতে, inputলুকানো থাকলে অক্ষম হয়ে যায় display: none। একটি ভাল পদ্ধতির ব্যবহার করা হবে position: fixed; top: -100em


<label>
  Open file dialog
  <input type="file" style="position: fixed; top: -100em">
</label>

আপনি যদি পছন্দ করেন তবে আপনি এই জাতীয় ইনপুটটির দিকে নির্দেশ করে "সঠিক পথে" যেতে পারেন :forlabelid

<label for="inputId">file dialog</label>
<input id="inputId" type="file" style="position: fixed; top: -100em">

4
এটি মনোযোগের মতো কাজ করে, তবে এখানে কয়েকটি প্রস্তাবনা রয়েছে: 1. <input>ট্যাগটির nameবৈশিষ্ট্য থাকা উচিত ; ২. যদি forঅ্যাট্রিবিউট নির্দিষ্ট করা থাকে তবে <input>ফাইল ট্যাগের জন্য একটি প্রয়োজন হবে id
র‌্যাপটার

5
Simplicity is the ultimate sophistication
ncubica

2
মহান! এটি ব্যাকগ্রাউন্ড ইমেজ থাকা বা লেবেলটিকে জাভাস্ক্রিপ্টের ট্রিগারযুক্ত একটি ক্লিক গ্রহণ করার সাথে সাথে মোহন হিসাবে কাজ করে like ধন্যবাদ!
লিও নামডেউ

2
বিটিডাব্লু, কেউ সাফারিতে এই দ্রবণটির সাথে একজনকে ধরা দিয়েছে, এতে লুকানো ইনপুট display: noneঅক্ষম। কাজটি ইনপুট আড়াল করতে একটি পৃথক পদ্ধতি ব্যবহার করছে। আমি প্রতিফলিত উত্তর আপডেট করব।
জেপি ডি লা

1
@JPdelaTorre ইনপুটটি আড়াল করার পরিবর্তে আপনি যদি অস্বচ্ছতা: 0 ব্যবহার করতে চান তবে এটি আরও ভাল।
এড্রিয়ান

39

প্রকৃতপক্ষে, আপনার অস্বচ্ছতা, দৃশ্যমানতা, <input>স্টাইলিং ইত্যাদির সমস্ত জিনিস দরকার নেই কেবল একবার দেখুন:

<a href="#">Just click me.</a>
<script type="text/javascript">
    $("a").click(function() {
        // creating input on-the-fly
        var input = $(document.createElement("input"));
        input.attr("type", "file");
        // add onchange handler if you wish to get the file :)
        input.trigger("click"); // opening dialog
        return false; // avoiding navigation
    });
</script>

JsFizz এ ডেমো । ক্রোম 30.0 এবং ফায়ারফক্স 24.0 এ পরীক্ষিত। তবে অপেরা 12.16 এ কাজ করেননি।


3
এটি সঠিক উত্তর হওয়া উচিত। খাঁটি জাভাস্ক্রিপ্ট প্রয়োগের জন্য, কোনও HTML কোড সংশোধন করার দরকার নেই।
ঝাং বাজ

21
নির্বোধ প্রশ্ন, তবে আপনি পরে নির্বাচিত ফাইলটি কীভাবে পাবেন?
জে উইক

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

3
@ চার্লস্টন দুর্ভাগ্যক্রমে, এটি কিছু ব্রাউজারে কাজ করে না। যদিও তাদের এটি করা উচিত :)
টিগ্রান সালুয়েভ

3
2020 পর্যন্ত, এই সমাধানটি সবচেয়ে ভাল বলে মনে হচ্ছে। এজ, সাফারি, অপেরা, ফায়ারফক্স এবং ক্রোমে ব্রাউজারস্ট্যাকে এটি পরীক্ষিত। তাদের সবকটিতে কাজ করে।
ভি। রুবিনেটে

14

এটিই আমার পক্ষে সবচেয়ে ভাল কাজ করেছে (IE8, এফএফ, ক্রোম, সাফারি পরীক্ষিত)।

#file-input {
  cursor: pointer;
  outline: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  filter: alpha(opacity=0); /* IE < 9 */
  opacity: 0;
}
.input-label {
  cursor: pointer;
  position: relative;
  display: inline-block;
}
<label for="file-input" class="input-label">
  Click Me <!-- Replace with whatever text or icon you wish to use -->
  <input type="file" id="file-input">
</label>

ব্যাখ্যা: আমি ক্লিক করতে ফাইলের ইনপুটটি সরাসরি উপাদানটির উপরে রেখেছি, সুতরাং যে কোনও ক্লিকগুলি হয় এটির উপর বা তার লেবেলে অবতরণ করবে (যা আপলোড ডায়ালগটি টেনে তুলবে ঠিক যেমন আপনি লেবেলটি ক্লিক করেছেন)। আমার ডিফল্ট ইনপুটটির বোতামের অংশটি লেবেলের পাশের দিক থেকে বাইরে থাকা নিয়ে কিছু সমস্যা ছিল, সুতরাং overflow: hiddenইনপুট এবং display: inline-blockলেবেলে প্রয়োজনীয় ছিল।


1
ইনপুটটি সর্বাধিক করুন এবং অস্বচ্ছতাটি শূন্যে সেট করুন। এটি দুর্দান্ত কাজ করে!
কিনারসি

13

জাভাস্ক্রিপ্ট ক্লায়েন্ট মেশিনে চালু করা আছে কি? সমস্ত পরিস্থিতিতে জন্য নিম্নলিখিত সমাধান ব্যবহার করুন। আপনার এমনকি জাভাস্ক্রিপ্ট / jQuery প্রয়োজন নেই। :

এইচটিএমএল

<label for="fileInput"><img src="File_upload_Img"><label>
<input type="file" id="fileInput"></label>

সিএসএস

#fileInput{opacity:0}  
body{
    background:cadetblue;
}

ব্যাখ্যা: for="Your input Id"। ট্রিগাররা এইচটিএমএল দ্বারা ডিফল্টরূপে ইভেন্ট ক্লিক করে। সুতরাং এটি ডিফল্টরূপে ক্লিক ইভেন্টগুলিকে ট্রিগার করে, jQuery / জাভাস্ক্রিপ্টের প্রয়োজন নেই। এটি যদি এইচটিএমএল দ্বারা সহজভাবে করা হয় তবে কেন jQuery / jScript ব্যবহার করবেন? এবং আপনি বলতে পারবেন না যে ক্লায়েন্ট জেএস অক্ষম করেছে। জেএস বন্ধ থাকলেও আপনার বৈশিষ্ট্যটি কাজ করা উচিত।

ওয়ার্কিং জেএসফিডেল (আপনার জেএস, জ্যাকুয়ের দরকার নেই)


3
পটভূমি কেন?
সলোমন উকো

12

প্রথমে মাথায় ট্যাগগুলি যুক্ত করুন:

<script>
   function showDialog(openFileDialog) {
       document.getElementById(openFileDialog).click();
   }
   function fileName(openFileDialog) {
       return document.getElementById(openFileDialog).value;
   }
   function hasFile(openFileDialog) {
       return document.getElementById(openFileDialog).value != "";
   }
   function fileNameWithoutFakePath(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(fileName.lastIndexOf('\\') + 1);
   }
   function fakePathWithoutFileName(openFileDialog) {
       var fileName = document.getElementById(openFileDialog).value;
       return fileName.substr(0, fileName.lastIndexOf('\\'));
   }
</script>

আপনার যদি ইতিমধ্যে স্ক্রিপ্ট ট্যাগ থাকে তবে উপরে এই ফাংশনগুলি যুক্ত করুন।

আপনার দেহে বা ফর্ম ট্যাগগুলিতে যুক্ত:

<input type="file" style="display:none" id="yourDesiredOrFavoriteNameForTheNewOpenFileDialogInstance"/>

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

আপনার এইচটিএমএল-তে খোলা ফাইল সংলাপগুলির উদাহরণ তৈরিতে আপনার জীবনকে স্বাচ্ছন্দ্য করতে আপনি এমন একটি ফাংশন তৈরি করতে পারেন যা এটি করে:

function createAndAddNewOpenFileDialog(name) {
     document.getElementById("yourBodyOrFormId").innerHtml += "<input type='file' style='display:none' id='" + name + "'/>"
}

এবং আপনি যদি ওপেন ফাইল ডায়লগটি মুছে ফেলতে চান তবে আপনি নীচের ফাংশনটি তৈরি এবং ব্যবহার করতে পারেন:

function removeOpenFileDialog(name) {
    var html = document.getElementById("yourBodyOrFormId").innerHtml;
    html = html.replace("<input type='file' style='display:none' id='" + name + "'/>", "");
    document.getElementById("yourBodyOrFormId").innerHtml = html;
}

তবে আপনি ওপেন ফাইল ডায়লগ অপসারণের আগে, নিশ্চিত করুন যে এটি নিম্নলিখিত ফাংশনটি তৈরি করে এবং ব্যবহার করে বিদ্যমান রয়েছে:

function doesOpenFileDialogExist(name) {
    return document.getElementById("yourBodyOrFormId").innerHtml.indexOf("<input type='file' style='display:none' id='" + name + "'/>") != -1
}

এবং যদি আপনি তৈরি এবং খোলা ফাইল ডায়ালগ যোগ করতে না চান শরীর বা ফর্ম HTML এ ট্যাগ, কারণ লুকানো ইনপুট টাইপ = "ফাইল" যোগ করা হয় এস, তাহলে আপনি এটি লিপিতে উপরের ফাংশন তৈরি ব্যবহার করতে পারি না :

function yourBodyOrFormId_onload() {
    createAndAddNewOpenFileDialog("openFileDialog1");
    createAndAddNewOpenFileDialog("openFileDialog2");
    createAndAddNewOpenFileDialog("openFileDialog3");
    createAndAddNewOpenFileDialog("File Upload");
    createAndAddNewOpenFileDialog("Image Upload");
    createAndAddNewOpenFileDialog("bla");
    //etc and rest of your code
}

আপনার শরীরের কাছাকাছি বা ট্যাগগুলি ফর্ম করে তা নিশ্চিত করুন:

onload="yourBodyOrFormId_onload()"

আপনি যদি ইতিমধ্যে এটি করে থাকেন তবে আপনাকে উপরের এই লাইনটি করতে হবে না।

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

শুভকামনা মানুষ!


1
অভ্যন্তরীণ এইচটিএমএলকে সরাসরি সংশোধন না করাই ভাল।
সলোমন উকো 26'16

9

সহজ উপায়:

#file-input {
  display: none;
}
<label for="file-input">
  <div>Click this div and select a file</div>
</label>
<input type="file" id="file-input"/>

কী গুরুত্বপূর্ণ, এর ব্যবহার display: noneনিশ্চিত করে যে কোনও স্থান লুকানো ফাইল ইনপুট (কী ব্যবহার করে ঘটে opacity: 0) দ্বারা দখল করা হবে না ।



2

কেবলমাত্র <input type="file">ছাড়াটি হ'ল ডিভের উপরে স্বচ্ছ ফ্ল্যাশ মুভি এম্বেড করা। তারপরে আপনি ফ্ল্যাশের ফাইলআরফারেন্স.ব্রোজে কলটি ট্রিগার করতে কোনও ব্যবহারকারী উত্পন্ন ক্লিক ইভেন্ট (ফ্ল্যাশ 10 নতুন সুরক্ষা বিধিগুলির সাথে সম্মতিযুক্ত ) ব্যবহার করতে পারেন

এটি কুইর্কসোমড পথে অতিরিক্ত নির্ভরতা সরবরাহ করে কিন্তু বিনিময়ে আপনি আরও অনেক ইভেন্ট পান (যেমন প্রগতি ইভেন্টগুলিতে নির্মিত)।


-1

ব্যবহার করতে পারেন

$('<input type="file" />').click()

আমার ক্ষেত্রে, এটি একই পৃষ্ঠায় একটি স্বয়ংক্রিয় পুনঃনির্দেশের কারণ ঘটায় যেখানে মূল ক্লিক ইভেন্টটি ঘটেছিল - পুরো পৃষ্ঠাটি পুনরায় লোড করে দেয় এবং পৃষ্ঠায় পূর্বে প্রবেশ করা সমস্ত ডেটা হারাতে পারে।
মুনতাসির
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.