jQuery ট্রিগার ফাইল ইনপুট

Question

আমি jQuery ব্যবহার করে একটি আপলোড বক্স (ব্রাউজ বোতাম) ট্রিগার করার চেষ্টা করছি।
আমি এখন যে পদ্ধতিটি চেষ্টা করেছি তা হ'ল:

$('#fileinput').trigger('click');   

তবে কাজ হচ্ছে বলে মনে হচ্ছে না। সাহায্য করুন. ধন্যবাদ.

Comments

আপনি ভালো কিছু করার চেষ্টা করতে পারেন এই পরিবর্তে।

— কীর্তন

এটি করার কোন উপায় নেই? কত হতাশাজনক।

— মার্কাস ডাউনিং

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

— ট্রায়ঙ্কো

দুর্ভাগ্যক্রমে, এর ধ্রুবক সুরক্ষা সমস্যা এবং সামগ্রী ব্লকারদের উত্থানের কারণে ফ্ল্যাশ ব্যবহার কম এবং কম কার্যকর হয়ে উঠছে।

— টিম

Answer 1

এটি কোনও সুরক্ষা বিধিনিষেধের কারণে।

আমি জানতে পেরেছিলাম যে সুরক্ষার সীমাবদ্ধতা কেবল তখনই <input type="file"/>সেট করা থাকে display:none;বা থাকে visbilty:hidden।

তাই আমি এটা পজিশনিং চেষ্টা ভিউপোর্ট বাহিরে সেটিং দ্বারা position:absoluteএবং top:-100px;এটি কাজ করে এবং voila।

দেখতে http://jsfiddle.net/DSARd/1/

এটিকে হ্যাক বলুন।

আশা করি এটি আপনার পক্ষে কাজ করে।

Comments

ff 3.6 এ কাজ করে না। ক্রোমে এবং এমনকি 8-তে যদিও কাজ করে :)

— আয়করসি

সুরক্ষা নিষেধাজ্ঞার বিষয়ে কি এমএসডিএন-তে কোনও দলিল আছে?

— ইমারফ অফ

দুর্দান্ত কাজ করে। যে কোনও ক্ষেত্রে আমি নিরাপদ সেট মনে করি left: -100px;। আপনি কখনই জানেন না যে কতক্ষণ কোনও পৃষ্ঠা হতে পারে

— অলটার লাগোস

+1 এটি আসল উত্তর (এবং একটি ভাল সমাধান)। এটি স্পষ্টভাবে বর্ণিত যেখানে ডকুমেন্টেশন একটি লিঙ্ক আছে?

— কনটুর

আপনি কেবল অপসারণ 0

— স্টুয়ার্ট

Answer 2

এটি আমার পক্ষে কাজ করেছে:

জাতীয়:

$('#fileinput').trigger('click'); 

এইচটিএমএল:

<div class="hiddenfile">
  <input name="upload" type="file" id="fileinput"/>
</div>

সিএসএস:

.hiddenfile {
 width: 0px;
 height: 0px;
 overflow: hidden;
}

---

>>> আর একটি যা ক্রস ব্রাউজারে কাজ করে: <<<

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

জেএস ফিডল: http://jsfiddle.net/5Rh7b/

এইচটিএমএল:

<div id="mybutton">
  <input type="file" id="myfile" name="upload"/>
  Click Me!
</div>

সিএসএস:

div#mybutton {

  /* IMPORTANT STUFF */
  overflow: hidden;
  position: relative;   

  /* SOME STYLING */
  width:  50px;
  height: 28px;
  border: 1px solid green;
  font-weight: bold
  background: red;
}

div#mybutton:hover {
  background: green;
}

input#myfile {
  height: 30px;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 100px;
  z-index: 2;

  opacity: 0.0; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=0); /* IE lt 8 */
  -ms-filter: "alpha(opacity=0)"; /* IE 8 */
  -khtml-opacity: 0.0; /* Safari 1.x */
  -moz-opacity: 0.0; /* FF lt 1.5, Netscape */
}

javascript:

$(document).ready(function() {
    $('#myfile').change(function(evt) {
        alert($(this).val());
    });
});

Comments

একটি ত্রুটি রয়েছে, যদি আপনি বোতামটি আরও প্রশস্ত করেন, তবে আই 9/10 এ অদৃশ্য আপলোড বোতামটি ডান বোতাম এবং একটি বাম পাঠ্য ক্ষেত্র দ্বারা তৈরি করা হয়। এটিতে আপনাকে ডাবল ক্লিক করতে হবে। এক্ষেত্রে ফন্ট-আকারটি 100px এর চেয়েও বড় সেট করার চেষ্টা করুন;

— ইউনজেন

ক্রোম 53. এমনকি এই কাজ যাইহোক, heightপরিবর্তন করতে পরামর্শ দেওয়া হয়height: 100%

— Raptor

দ্বিতীয়টি এমনকি iOS এ সাফারিতে কাজ করে works খুব সুন্দর!

— জান্নিস

Answer 3

আপনি প্রাক্তন LABEL উপাদানটি ব্যবহার করতে পারেন।

<div>
    <label for="browse">Click Me</label>
    <input type="file" id="browse" name="browse" style="display: none">//
</div>

এটি ইনপুট ফাইলটি ট্রিগার করবে

Comments

কেন এটি গৃহীত উত্তর নয়? এটি সহজতম উপায় যার জন্য কোনও মজার জাভাস্ক্রিপ্টের প্রয়োজন নেই।

— tomitrescak

@ টমিট্রেসাক ওপি সেরা উত্তর পাওয়ার জন্য অপেক্ষা করছে না।

— মাহি

মনে রাখবেন উত্তর জমা দেওয়ার পরে প্রশ্ন জমা দেওয়ার 7 বছর পরে।

2018 এও সেরা উত্তর।

— masoomyf

); খুব 2019 জন্য সবচেয়ে ভালো উত্তর

— guillaumepotier

Answer 4

আমি এটি IE8 +, সাম্প্রতিক এফএফ এবং ক্রোমে (= পরীক্ষিত) কাজ করছি:

$('#uploadInput').focus().trigger('click');

চাবি আগে ফোকাস করা হয়ক্লিকটি ফায়ার করার (অন্যথায় ক্রোম এটিকে উপেক্ষা করে)।

দ্রষ্টব্য: আপনার নিজের ইনপুট প্রদর্শিত এবং দৃশ্যমান হওয়ার দরকার নেই (যেমন রয়েছে, নেই display:noneএবং নেই visibility:hidden)। আমি প্রস্তাব দিই (অন্যদের মতো এর আগেও রয়েছে) একেবারে ইনপুটটি পজিশন করুন এবং এটিকে স্ক্রিন থেকে ফেলে দিন।

#uploadInput {
    position: absolute;
    left: -9999px;
}

Comments

তার জন্য +1। আমি আরও লক্ষ্য করেছি যে আপনি পার্শ্ববর্তী উপাদানটি লুকিয়ে রাখতে পারেন তবে ফাইল ইনপুট বোতামটি নয়, তারপরে পার্শ্ববর্তী উপাদানটি দেখান, বোতামটি ফোকাস করুন, এটি সক্রিয় করুন, এবং বোতামটি আড়াল করুন।

— স্টিভো

Answer 5

আমার কোলাহল পরীক্ষা করে দেখুন।

http://jsfiddle.net/mohany2712/vaw8k/

.uploadFile {
  visibility: hidden;
}

#uploadIcon {
  cursor: pointer;
}

<body>
  <div class="uploadBox">
    <label for="uploadFile" id="uploadIcon">
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Icon_-_upload_photo_2.svg/512px-Icon_-_upload_photo_2.svg.png"  width="20px" height="20px"/>
    </label>
    <input type="file" value="upload" id="uploadFile" class="uploadFile" />
  </div>
</body>

Answer 6

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

যারা চান তাদের জন্য এখানে একটি ছোট উদাহরণ:

input[type='file']{
    position:absolute;
    opacity:0;
    /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* For IE5 - 7 */
    filter: alpha(opacity=0);
}

Answer 7

শুধু কৌতূহলের খাতিরে, আপনি ডম ট্রি এ যুক্ত না করে গতিশীলভাবে একটি আপলোড ফর্ম এবং ইনপুট ফাইল তৈরি করে নিজের মতো কিছু করতে পারেন:

$('.your-button').on('click', function() {
    var uploadForm = document.createElement('form');
    var fileInput = uploadForm.appendChild(document.createElement('input'));

    fileInput.type = 'file';
    fileInput.name = 'images';
    fileInput.multiple = true;

    fileInput.click();
});

ডোমটিতে আপলোডফর্ম যোগ করার দরকার নেই।

Comments

ধন্যবাদ! আমি এটি 20 মিনিটের জন্য খুঁজছি!

— ল্যাব

Answer 8

সঠিক কোড:

<style>
    .upload input[type='file']{
        position: absolute;
        float: left;
        opacity: 0; /* For IE8 "Keep the IE opacity settings in this order for max compatibility" */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* For IE5 - 7 */
        filter: alpha(opacity=0);
        width: 100px; height: 30px; z-index: 51
    }
    .upload input[type='button']{
        width: 100px;
        height: 30px;
        z-index: 50;
    }
    .upload input[type='submit']{
        display: none;
    }
    .upload{
        width: 100px; height: 30px
    }
</style>
<div class="upload">
    <input type='file' ID="flArquivo" onchange="upload();" />
    <input type="button" value="Selecionar" onchange="open();" />
    <input type='submit' ID="btnEnviarImagem"  />
</div>

<script type="text/javascript">
    function open() {
        $('#flArquivo').click();
    }
    function upload() {
        $('#btnEnviarImagem').click();
    }
</script>

Answer 9

এটি উদ্দেশ্য এবং নকশার ভিত্তিতে। এটি একটি সুরক্ষা সমস্যা।

Answer 10

আসলে, আমি এর জন্য একটি খুব সহজ পদ্ধতি খুঁজে পেয়েছি, যা হ'ল:

$('#fileinput').show().trigger('click').hide();   

এই ভাবে, আপনার ফাইল ইনপুট ক্ষেত্র CSS সম্পত্তি থাকতে পারে প্রদর্শন উপর কেউ এবং এখনও বাণিজ্য win :)

Comments

এটি ধীর মেশিনে পর্দায় ঝাঁকুনি দিতে পারে। কোনও অনুকূল সমাধান নয়

— দিমিত্রি এফিমেনকো

Answer 11

উত্তর দিতে দেরি হলেও আমার মনে হয় এই ন্যূনতম সেটআপটি সবচেয়ে ভাল কাজ করেছে। আমিও একই সন্ধান করছি।

  <div class="btn-file">
     <input type="file" class="hidden-input">
     Select your new picture
  </div>

// CSS

.btn-file {
  display: inline-block;
  padding: 8px 12px;
  cursor: pointer;
  background: #89f;
  color: #345;
  position: relative;
  overflow: hidden;
}

.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  filter: alpha(opacity=0);
  opacity: 0;
  cursor: inherit;
  display: block;
}

jsbin

বুটস্ট্র্যাপ ফাইল ইনপুট বোতাম ডেমো

Comments

উত্তর দেওয়ার জন্য কখনই দেরি হয় না;)

— এজিওয়াই কল্ট জেরাল্ড

কয়েক বছর পরে এখনও সেরা উত্তর আইএমও

— DimmuR

Answer 12

এটি একটি খুব পুরানো প্রশ্ন, তবে দুর্ভাগ্যক্রমে এই সমস্যাটি এখনও প্রাসঙ্গিক এবং এর সমাধান প্রয়োজন।

(আশ্চর্যজনকভাবে সহজ) সমাধানটি আমি নিয়ে এসেছি হ'ল আসল ফাইল ইনপুট ক্ষেত্রটি "আড়াল করা" এবং এটি একটি লেবেল ট্যাগের সাথে আবৃত করা (বৃদ্ধির জন্য বুটস্ট্র্যাপ এবং এইচটিএমএল 5 এর উপর ভিত্তি করে তৈরি করা যেতে পারে)।

See here:উদাহরণ কোড এখানে

এইভাবে, আসল ফাইল ইনপুট ক্ষেত্রটি অদৃশ্য এবং আপনি যা দেখেন তা হ'ল কাস্টমাইজড "বোতাম" যা আসলে পরিবর্তিত LABEL উপাদান is আপনি যখন এই LABEL উপাদানটিতে ক্লিক করেন, কোনও ফাইল বাছাই করার জন্য উইন্ডো আসে এবং আপনি যে ফাইলটি চয়ন করেন তা আসল ফাইল ইনপুট ক্ষেত্রে চলে যায়।

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

যদিও সাবধান! এর চেহারা এবং আচরণের কারসাজি আপনি যা কল্পনা করতে এবং ভাবতে পারেন তা সীমাবদ্ধ। ;-) ;-)

Answer 13

আমি একটি সাধারণ with (...) দিয়ে পরিচালনা করেছি click ক্লিক করুন (); JQuery 1.6.1 সহ

Comments

হুম কৌতুহল আপনি কীভাবে এটি করেছিলেন, আমার ওয়েবসাইটে (www.iscriptdesign.com) একটি $ ('ফাইল: ইনপুট') করছেন click ক্লিক');

— ডাঃ জেরি

এখানে সম্পূর্ণ উদাহরণ: <ইনপুট টাইপ = "ফাইল" আইডি = "পিক ব্রাউজ" ... এবং তারপরে $ ('# পিক ব্রাউজ') ক্লিক করুন ();

— ভ্যালেন্টিন গেলা

আমি ম্যাক ওএসে সিআর (কোন সংস্করণটি নিশ্চিত নই) পরীক্ষা করেছি, যদিও এক্সপি-তে এফএফ 4 এ কাজ করে। ধন্যবাদ!

— ডাঃ জেরি

Answer 14

অন্যথায় সহজভাবে

$(':input[type="file"]').show().click().hide();

Answer 15

<input type="file"/>এটি ট্রিগার করতে একটি নকল বোতাম ব্যবহার করার সময় কাস্টম ক্লায়েন্ট সাইডের বৈধতা নিয়ে আমার সমস্যা ছিল এবং @ গুইলিউম বোডির সমাধানটি আমার পক্ষে কাজ করেছে ( opacity: 0;ক্রোম সহও)

$("#MyForm").on("click", "#fake-button", function () {
        $("#uploadInput").focus().trigger("click");
    });

এবং আপলোড ইনপুট জন্য সিএসএস শৈলী

#uploadInput {
opacity: 0.0; 
filter: alpha(opacity=0); /* IE lt 8 */
-ms-filter: "alpha(opacity=0)"; /* IE 8 */
-khtml-opacity: 0.0; /* Safari 1.x */
-moz-opacity: 0.0;
}

Answer 16

এটি চেষ্টা করুন, এটি একটি হ্যাক। অবস্থান: পরম Chrome এর জন্য এবং ট্রিগার ('পরিবর্তন') IE এর জন্য।

var hiddenFile = $("<input type=\"file\" name=\"file\" id=\"file1\" style=\"position:absolute;left:-9999px\" />");
$('body').append(hiddenFile);

$('#aPhotoUpload').click(function () {
    hiddenFile.trigger('click');
    if ($.browser.msie)
        hiddenFile.trigger('change');
});

hiddenFile.change(function (e) {
    alert('TODO');
});

Comments

নোট যে $.browserjQuery এর নতুন সংস্করণে হ্রাস করা হয়েছে

— কেভিন বিল

Answer 17

আইওএস My এ আমার সমস্যাটি কিছুটা আলাদা ছিল Fast দ্রুত ক্লিক করে সমস্যা দেখা দিচ্ছিল। আমাকে যা করতে হয়েছিল তা হ'ল class="needsclick"আমার বোতামে যুক্ত।

Answer 18

ক্রস ব্রাউজারের বিষয়গুলি মাথায় রেখে সম্ভবত এটিই সেরা উত্তর।

সিএসএস:

#file {
  opacity: 0;
  width: 1px;
  height: 1px;
}

জাতীয়:

$(".file-upload").on('click',function(){
   $("[name='file']").click();
});

এইচটিএমএল:

<a class="file-upload">Upload</a>
<input type="file" name="file">

Answer 19

আমি মনে করি আমি আপনার সমস্যাটি বুঝতে পারি, কারণ আমারও একই রকম। সুতরাং <label>ট্যাগটির জন্য এট্রিবিউট রয়েছে, আপনি নিজের ইনপুটটিকে = "ফাইল" টাইপের সাথে যুক্ত করতে এই অ্যাট্রিবিউটটি ব্যবহার করতে পারেন। তবে আপনি যদি এই লেবেলটি ব্যবহার করে আপনার লেআউটটির কিছু নিয়ম ব্যবহার করে এটি সক্রিয় করতে না চান তবে আপনি এটি করতে পারেন।

$(document).ready(function(){
  var reference = $(document).find("#main");
  reference.find(".js-btn-upload").attr({
     formenctype: 'multipart/form-data'
  });
  
  reference.find(".js-btn-upload").click(function(){
    reference.find("label").trigger("click");
  });
  
});

.hide{
  overflow: hidden;
  visibility: hidden;
  /*Style for hide the elements, don't put the element "out" of the screen*/
}

.btn{
  /*button style*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div id="main">
<form enctype"multipart/formdata" id="form-id" class="hide" method="post" action="your-action">
  <label for="input-id" class="hide"></label>
  <input type="file" id="input-id" class="hide"/>
</form>

<button class="btn js-btn-upload">click me</button>
</div>

অবশ্যই আপনি এটি আপনার নিজের উদ্দেশ্য এবং বিন্যাসের জন্য মানিয়ে নেবেন, তবে এটিকে কাজটি করতে আমি এটি আরও সহজেই জানি !!

Answer 20

গিলিয়াম বোডির উত্তরের ভিত্তিতে আমি এটি করেছি:

$('.fileinputbar-button').on('click', function() {
    $('article.project_files > header, article.upload').show();
    $('article.project_files > header, article.upload header').addClass('active');
    $('.file_content, article.upload .content').show();
    $('.fileinput-button input').focus().click();
    $('.fileinput-button').hide();
});

যার অর্থ এটি শুরু করে লুকানো এবং তারপরে ট্রিগারটির জন্য প্রদর্শিত, তারপরে তাত্ক্ষণিকভাবে আবার লুকানো।