জাভাস্ক্রিপ্টে আমি কোনও ফাইল ইনপুট উপাদানটির জন্য প্রোগ্রামিমেটিকভাবে একটি "ক্লিক" ইভেন্ট ফায়ার করতে পারি?

Question

আমি <input type="file">প্রোগ্রামে কোনও ট্যাগটিতে ক্লিক ইভেন্টে আগুন তৈরি করতে চাই ।

কলিং ক্লিক () কেবল কিছু করতে পারে না বা কমপক্ষে এটি কোনও ফাইল নির্বাচন সংলাপ পপ আপ করে না বলে মনে হচ্ছে।

আমি শ্রোতাদের ব্যবহার করে ইভেন্টগুলি ক্যাপচার এবং ইভেন্টটিকে পুনর্নির্দেশের সাথে পরীক্ষা করে যাচ্ছি, তবে ঘটনাটি কেউ এটির ক্লিক করার মতো করে আসলেই সম্পাদন করতে আমি সক্ষম হতে পারিনি।

Comments

আপনার ট্রিগার হওয়া ক্লিক ইভেন্টটি ব্যবহারকারী দ্বারা শুরু করা একটি ক্লিক ইভেন্টের মধ্যে ডেকে আনতে হবে, বা এটি কাজ করবে না।

— উমাগন

Answer 1

আপনি সমস্ত ব্রাউজারে এটি করতে পারবেন না, ধারণা করা হয় IE এটির অনুমতি দেয় তবে মজিলা এবং অপেরা তা দেয় না।

আপনি যখন GMail এ কোনও বার্তা রচনা করেন, তখন 'সংযুক্ত ফাইলগুলি' বৈশিষ্ট্যটি IE এবং যে কোনও ব্রাউজারের পক্ষে এটি সমর্থন করে তার জন্য কার্যকর করা হয় এবং ফায়ারফক্স এবং ব্রাউজারগুলির পক্ষে অন্য কোনও উপায় কার্যকর করে।

আমি কেন আপনি তা ব্যবহার করতে পারবেন না জানি না, কিন্তু এক জিনিস যে হয় একটি নিরাপত্তা ঝুঁকি, এবং আপনি যেকোনো ব্রাউজার না করার অনুমতি দেওয়া হয়নি, যা প্রোগ্রামের মাধ্যমে HTML ফাইল উপাদান ফাইলের নাম সেট করা হয়।

Comments

বিরক্তি প্রকাশ করতে ব্যবহৃত। আমি অবশ্যই বুঝতে পারি যে এটি শোষণীয়। এই কোথাও নথিভুক্ত করা হয়? আমার ধারণা এটি প্রতিটি ব্রাউজার দ্বারা প্রয়োগ করা হবে?

— ব্যবহারকারী 28655

পূর্ববর্তী উত্তরের চেয়ে আমার উত্তরটি আরও সঠিক হতে আপডেট করেছে - গিস্টটি সমান, তবে স্পষ্টকরণে কিছুটা সহায়তা করা উচিত। এই লোকটি একই সমস্যায় পড়েছিল

— জেসন

ধন্যবাদ Godশ্বর এফএফ 5 এই ক্লিকের অনুমতি দেয়

— রাশিমোদা

উপরের মন্তব্যটি পরিষ্কার করতে: ফাইলের inputউপাদানটি দৃশ্যমান কিনা তা পরীক্ষা করার জন্য ক্রোম সম্প্রতি পরিবর্তিত হয়েছে । clickউপাদানটি ট্রিগার করে কনসোল সহ, যদি উপাদানটি দেখা যায় তবে কাজ করে।

— জাওয়াদস্যাক

@ অটোভজনি - বন্ধু, এই উত্তরটি (আপনি যা বলছেন তা ভুল) 10 বছর বয়সী - এতে অবাক হওয়ার কিছু নেই যে এটি সঠিক নয়! (আমি নিশ্চিতভাবে জানি না, আমি এটির জন্য আপনার কথা নিচ্ছি)। : পি

— জেসন কিনে

Answer 2

আমি এই পুরো দিনটির সমাধান অনুসন্ধান করছি। এবং এগুলিই আমি তুলে ধরেছি:

1. সুরক্ষা কারণে অপেরা এবং ফায়ারফক্স ফাইল ইনপুট ট্রিগার করতে দেয় না।
2. একমাত্র সুবিধাজনক বিকল্প হ'ল "লুকানো" ফাইল ইনপুট তৈরি করা (অস্বচ্ছতা ব্যবহার করে, "লুকানো" বা "প্রদর্শন: কিছুই নয়") এবং তারপরে "নীচে" বোতামটি তৈরি করা। এইভাবে বোতামটি দেখা যায় তবে ব্যবহারকারী ক্লিক এ এটি আসলে ফাইল ইনপুট সক্রিয় করে।

আশাকরি এটা সাহায্য করবে! :)

<div style="display: block; width: 100px; height: 20px; overflow: hidden;">
<button style="width: 110px; height: 30px; position: relative; top: -5px; left: -5px;"><a href="javascript: void(0)">Upload File</a></button>
<input type="file" id="upload_input" name="upload" style="font-size: 50px; width: 120px; opacity: 0; filter:alpha(opacity=0);  position: relative; top: -40px;; left: -20px" />
</div>

Comments

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

— ইয়েজগেনি সিমকিন

এই উত্তরের জন্য আপনাকে ধন্যবাদ, এটি দুর্দান্ত: D

— mario.tco

সুন্দর সমাধান। অ্যান্ড্রয়েড মোবাইল ব্রাউজারেও কাজ করে।

— gstroup

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

— ধূমপান

এটির সাথে একমাত্র সমস্যা হ'ল আপনি যদি হোভারের বোতামের স্টাইলটি পরিবর্তন করতে চান তবে আপনি পারবেন না। যার অর্থ আপনি যদি নিজের অ্যাপ্লিকেশানের অন্যান্য বোতামগুলির মতো দেখতে চান তবে আপনি পারবেন না।

— ভিনসেন্ট

Answer 3

আপনি যে কোনও ব্রাউজারে ক্লিক () ক্লিক করতে পারেন তবে কিছু ব্রাউজারের উপাদানটি দৃশ্যমান এবং ফোকাস করার জন্য প্রয়োজন। এখানে একটি jQuery উদাহরণ:

$('#input_element').show();
$('#input_element').focus();
$('#input_element').click();
$('#input_element').hide();

এটি এর আগে লুকানোর সাথে কাজ করে click()তবে আমি জানি না এটি শো পদ্ধতির কল না করে এটি কাজ করে কিনা। এটি কখনই অপেরাতে চেষ্টা করে দেখিনি, আমি আইই / এফএফ / সাফারি / ক্রোমে পরীক্ষা করেছি এবং এটি কার্যকর হয়। আমি আশা করি এটি সাহায্য করবে

Comments

ভাগ করে নেওয়ার জন্য ধন্যবাদ. আপনি যদি না জানতেন তবে আপনি jQuery এ $(...).show().focus().click().hide();

— চেইন

@ পিমভিডিবি: আমি যতদূর পরীক্ষা করেছি আপনার সমাধানটি কেবল ক্রোমে কাজ করে।

— হোং লং

@ হোয়াং লং: আপনি কী শৃঙ্খলা বা ফ্লোরিন মোগোসের সমাধান বোঝাতে চান? আমি বিশ্বাস করি না চেইন কোনও ক্রস-ব্রাউজারের পার্থক্য তৈরি করে।

— pimvdb

@ হোওংলং এটি IE 8 এবং 9, সর্বশেষতম ক্রোম, সাফারি এবং ফায়ারফক্সে আমার জন্য কাজ করে।

— সামি সামহুরী

স্ট্রেঞ্জ। আমি যেমন পরীক্ষা করেছি, এটি উবুন্টুতে ক্রোমের অধীনে কাজ করে না।

— স্যান্ড্রু

Answer 4

এই সম্ভাব্য: FF4 + এর অধীনে, অপেরা?, ক্রোম: কিন্তু:

1. inputElement.click()ব্যবহারকারীর ক্রিয়া প্রসঙ্গে বলা উচিত! (স্ক্রিপ্ট সম্পাদন প্রসঙ্গে নয়)

2. <input type="file" />দৃশ্যমান হওয়া উচিত ( inputElement.style.display !== 'none') (আপনি এটিকে দৃশ্যমানতা বা অন্য কোনও কিছু দিয়ে আড়াল করতে পারেন তবে "প্রদর্শন" সম্পত্তি নয়)

Comments

এটি আমার জন্য এটি সমাধান করেছে। আমাকে onclickইভেন্টটির সাথে বাঁধার পরিবর্তে বৈশিষ্ট্যে জাভাস্ক্রিপ্ট যুক্ত করতে হয়েছিল ।

— জেসনলফাঁক

একমাত্র যুক্তিসঙ্গত সমাধান সমর্থন। ওভারফ্লো পদ্ধতিটি কুরুচিপূর্ণ।

— ধূমপান

হা! আমি জানতাম এটি প্রসঙ্গে কিছু হতে পারে! আমি দেখেছি যে inputElement.click()কীডাউন ইভেন্টের মধ্যে থেকে কল (কোনও ফাইল সংযুক্ত করার শর্টকাট) কাজ করেছে, তবে এটির টাইমআউট বা এজাক্স কলব্যাকে কল করা কার্যকর হয়নি। সম্মত।

— ব্রেকেটজোনদেব

বিটিডব্লিউ-এর "ব্যবহারকারীর ক্রিয়া প্রসঙ্গে" বনাম "স্ক্রিপ্ট সম্পাদন প্রসঙ্গে" এর কি আরও কিছু সংস্থান আছে? সবকিছু আমি অনুসন্ধানের ফাঁসি প্রসঙ্গ এবং কি আছে দেখছি this। : /

— ব্রেটজোনদেব

@ ব্রেটজোনসদেব আমি মনে করি এর অর্থ এটি একটি ব্যবহারকারী-সূচিত ইভেন্ট হ্যান্ডলারের ভিতরে যেমন একটি ক্লিক ইভেন্ট হ্যান্ডলারের মতো, একটি প্রতিশ্রুতি, সময়সীমা বা অন্য কোনও ব্যবহারকারীর সূচনাপ্রাপ্ত ইভেন্টের বাইরে কার্যকর করা দরকার।

— অ্যালেক্স গুয়ের

Answer 5

যারা বুঝতে পেরেছেন যে আপনাকে লিঙ্কটির উপরে একটি অদৃশ্য ফর্ম আবৃত করতে হবে, তবে লিখতে খুব অলস, আমি এটি আপনার জন্য লিখেছিলাম। ভাল, আমার জন্য, তবে পাশাপাশি ভাগ করে নিতে পারেন। মন্তব্য স্বাগত।

এইচটিএমএল (কোথাও):

<a id="fileLink" href="javascript:fileBrowse();" onmouseover="fileMove();">File Browse</a>

এইচটিএমএল (কোথাও আপনার যত্ন নেই):

<div id="uploadForm" style="filter:alpha(opacity=0); opacity: 0.0; width: 300px; cursor: pointer;">
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
    </form>
</div>

javascript:

function pageY(el) {
    var ot = 0;
    while (el && el.offsetParent != el) {
        ot += el.offsetTop ? el.offsetTop : 0;
        el = el.offsetParent;
    }
    return ot;
}

function pageX(el) {
    var ol = 0;
    while (el && el.offsetParent != el) {
        ol += el.offsetLeft ? el.offsetLeft : 0;
        el = el.offsetParent;
    }
    return ol;
}

function fileMove() {
    if (navigator.appName == "Microsoft Internet Explorer") {
        return; // Don't need to do this in IE. 
    }
    var link = document.getElementById("fileLink");
    var form = document.getElementById("uploadForm");
    var x = pageX(link);
    var y = pageY(link);
    form.style.position = 'absolute';
    form.style.left = x + 'px';
    form.style.top = y + 'px';
}

function fileBrowse() {
    // This works in IE only. Doesn't do jack in FF. :( 
    var browseField = document.getElementById("uploadForm").file;
    browseField.click();
}

Answer 6

এই সমাধানটি ব্যবহার করে দেখুন: http://code.google.com/p/upload-at-click/

Comments

এটি অন্তত আই 9 তে খুব কুরুচিপূর্ণ দেখাচ্ছে।

— কিবেরিয়াস

Answer 7

কেবল একটি লেবেল ট্যাগ ব্যবহার করুন, আপনি যেভাবে ইনপুটটি আড়াল করতে পারেন এবং এটি সম্পর্কিত সম্পর্কিত https://developer.mozilla.org/fr/docs/Web/HTML/Element/Label এর মাধ্যমে কাজ করতে পারেন

Comments

এটি সঠিক উত্তর এবং এটি প্রচার করা উচিত।

— ওয়েয়ারটেক

Answer 8

আপনি যদি clickপদ্ধতিটি ক্রোম, ফায়ারফক্স ইত্যাদিতে কাজ করতে চান তবে আপনার ইনপুট ফাইলে নিম্নলিখিত স্টাইলটি প্রয়োগ করুন। এটি পুরোপুরি গোপন থাকবে, এটি আপনার মতো করেdisplay: none;

#fileInput {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: -5000px;
}

এটি এত সহজ, আমি পরীক্ষিত এটি কাজ করে!

Comments

আমার এই পদ্ধতিটি সবচেয়ে ভাল লেগেছে যেহেতু কিছু পুরানো ব্রাউজারগুলি লুকানো থাকলে ইনপুটমেন্ট সিলেট ক্লিক করুন () এ কিছুই করবে না।

— নিক

কেন শুধু শুধু সেট heightএবং widthকরতে 0?

— সলোমন উকো 26'16

Answer 9

$(document).one('mousemove', function() { $(element).trigger('click') } );

আমি যখন একই ধরণের সমস্যায় পড়ি তখন আমার জন্য কাজ করেছিলাম, এটি নিয়মিত ইরউব গোল্ডবার্গ।

Answer 10

ওয়ার্কিং সলিউশন

আমাকে এই পুরানো পোস্টে যুক্ত করতে দিন, আমি ব্যবহার করি এমন একটি কার্যকর সমাধান যা সম্ভবত নতুন এবং পুরাতন উভয় ব্রাউজারের 80% বা তার বেশি কাজ করে।

সমাধান জটিল তবে সহজ। প্রথম পদক্ষেপটি হ'ল সিএসএস ব্যবহার করা এবং ইনপুট ফাইলের ধরণটিকে "আন্ডার-এলিমেন্টস" দিয়ে অনুমান করা যা এটির অস্বচ্ছতা রয়েছে বলে দেখায় The পরবর্তী পদক্ষেপটি প্রয়োজন অনুসারে তার লেবেল আপডেট করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা।

এইচডিএমএল _{আইডি কেবলমাত্র সন্নিবেশ করা হয় যদি আপনি কোনও নির্দিষ্ট উপাদান অ্যাক্সেসের দ্রুত উপায় চান, তবে ক্লাসগুলি অবশ্যম্ভাবী যেগুলি সিএসএসের সাথে সম্পর্কিত যা এই পুরো প্রক্রিয়াটিকে সেট আপ করে}

<div class="file-input wrapper">
    <input id="inpFile0" type="file" class="file-input control" />
    <div class="file-input content">
        <label id="inpFileOutput0" for="inpFileButton" class="file-input output">Click Here</label>
        <input id="inpFileButton0" type="button" class="file-input button" value="Select File" />
    </div>
</div>

সিএসএস মাথায় _{রাখুন, রঙ করা এবং ফন্ট-স্টাইলগুলি এবং এগুলি সম্পূর্ণ আপনার পছন্দ, আপনি যদি এই বেসিক সিএসএস ব্যবহার করেন তবে আপনি সর্বদা আপনার পছন্দ মতো শৈলীতে শেষের চিহ্ন ব্যবহার করতে পারেন, এটি শেষে তালিকাভুক্ত জেএসফিডেলে প্রদর্শিত হবে।}

.file-test-area {
    border: 1px solid;
    margin: .5em;
    padding: 1em;
}
.file-input {
    cursor: pointer !important;
}
.file-input * {
    cursor: pointer !important;
    display: inline-block;
}
.file-input.wrapper {
    display: inline-block;
    font-size: 14px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: auto;
}
.file-input.control {
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;

    height: 100%;
    position: absolute;
    text-align: right;
    width: 100%;
    z-index: 2;
}
.file-input.content {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
}
.file-input.output {
    background-color: #FFC;
    font-size: .8em;
    padding: .2em .2em .2em .4em;
    text-align: center;
    width: 10em;
}
.file-input.button {
    border: none;
    font-weight: bold;
    margin-left: .25em;
    padding: 0 .25em;
}

জাভাস্ক্রিপ্ট _{খাঁটি এবং সত্য, তবে কিছু পুরাতন (অবসরপ্রাপ্ত) ব্রাউজারগুলির এখনও এটির সাথে সমস্যা থাকতে পারে (যেমন নেটস্ক্রেপ 2!)}

var inp = document.getElementsByTagName('input');
for (var i=0;i<inp.length;i++) {
    if (inp[i].type != 'file') continue;
    inp[i].relatedElement = inp[i].parentNode.getElementsByTagName('label')[0];
    inp[i].onchange /*= inp[i].onmouseout*/ = function () {
        this.relatedElement.innerHTML = this.value;
    };
};

ওয়ার্কিং jsFizz উদাহরণ

Answer 11

এটি কাজ করে:

ফায়ারফক্স এবং অপেরাতে সুরক্ষার কারণে, আপনি ফাইল ইনপুটটিতে ক্লিক চালিয়ে দিতে পারবেন না, তবে আপনি মাউসএভেন্টস দিয়ে সিমুলেট করতে পারেন:

<script>
click=function(element){
    if(element!=null){
        try {element.click();}
        catch(e) {
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("click",true,true,window,0,0,0,0,0,false,false,false,false,0,null);
            element.dispatchEvent(evt);
            }
        }
    };
</script>

<input type="button" value="upload" onclick="click(document.getElementById('inputFile'));"><input type="file" id="inputFile" style="display:none">

Comments

নোট করুন createEvent()এবং initMouseEvent()এখন অবচয় করা হয়েছে।

— অ্যালেক্সিস উইল্কে

Answer 12

আমি জানি এটি পুরানো এবং এই সমস্ত সমাধান হ'ল প্রকৃত মান সহ ব্রাউজার সুরক্ষা সতর্কতার আশেপাশে।

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

তবে আমি একটি সমাধান পেয়েছি যা এই সমস্ত ব্রাউজারে কাজ করে। আমি প্রতিটি ব্রাউজারের প্রতিটি সংস্করণ পরীক্ষা করে নেওয়ার দাবি করব না, বা আমি জানি এটি চিরকালের জন্য কাজ চালিয়ে যাবে, তবে এটি এখন আমার চাহিদা মেটাচ্ছে বলে মনে হয়।

এটি সহজ: ফাইল ইনপুট ফিল্ড অফস্ক্রিন স্থাপন করুন (অবস্থান: পরম; শীর্ষ: -5000px), এটির চারপাশে একটি লেবেল উপাদান রাখুন এবং ফাইলের ক্ষেত্রের পরিবর্তে লেবেলে ক্লিকটি ট্রিগার করুন।

নোট করুন যে লিঙ্কটির লেবেলের ক্লিক পদ্ধতিটি কল করার জন্য স্ক্রিপ্ট করা দরকার, এটি স্বয়ংক্রিয়ভাবে তা করে না, যেমন আপনি যখন কোনও লেবেলের উপাদানটির ভিতরে থাকা পাঠ্যে ক্লিক করেন। স্পষ্টতই লিঙ্ক উপাদানটি ক্লিকটি ক্যাপচার করে এবং এটি এটি লেবেলের মাধ্যমে তৈরি করে না।

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

Comments

ঠিক আছে, বোতাম ট্যাগে, অন্লিক = "ফাইলট্যাগক্লিক ()" আইই 9 এবং 10 এর সাথে কাজ করে না (তবে আইই 11, ফায়ারফক্স 4/10/26/27/28, ক্রোম / ক্রোমিয়াম 31/32/33 / এর সাথে কাজ করে 36, সাফারি 7, অপেরা 23)। তবে, আপনি যদি "" আইডি-অফ-ফাইল-ইনপুট "(অন্লিক ছাড়া) এর জন্য কোনও লেবেল ব্যবহার করেন তবে এটি আইই 9-10/11 এর জন্য কাজ করে।

— luigifab

Answer 13

জেএস ফিডল: http://jsfiddle.net/eyedean/1bw357kw/

popFileSelector = function() {
    var el = document.getElementById("fileElem");
    if (el) {
        el.click();  
    }
};

window.popRightAway = function() {
    document.getElementById('log').innerHTML += 'I am right away!<br />';
    popFileSelector();
};

window.popWithDelay = function() {
    document.getElementById('log').innerHTML += 'I am gonna delay!<br />';
    window.setTimeout(function() {
        document.getElementById('log').innerHTML += 'I was delayed!<br />';
        popFileSelector();
    }, 1000);
};

<body>
  <form>
      <input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)" />
  </form>
  <a onclick="popRightAway()" href="#">Pop Now</a>
    <br />
  <a onclick="popWithDelay()" href="#">Pop With 1 Second Delay</a>
    <div id="log">Log: <br /></div>
</body>

Answer 14

এই কোডটি আমার পক্ষে কাজ করে। এটিই আপনি যা করার চেষ্টা করছেন?

<input type="file" style="position:absolute;left:-999px;" id="fileinput" />
<button  id="addfiles" >Add files</button>

<script language="javascript" type="text/javascript">
   $("#addfiles").click(function(){
      $("#fileinput").click();
   });
</script>

Answer 15

JQuery এবং jQuery-ui সহ সাফারির জন্য আমার সমাধান:

$("<input type='file' class='ui-helper-hidden-accessible' />").appendTo("body").focus().trigger('click');

Comments

মাথা আপ: ফায়ারফক্স 33, ক্রোম 38 এর জন্য কাজ করে না trigger ট্রিগার ('ক্লিক করুন') কেবল ব্যবহারকারী ইন্টারঅ্যাকশন ইভেন্ট প্রসঙ্গে - ইভেন্ট হ্যান্ডলারগুলির মধ্যে কাজ করতে পারে।

— অমিত জি

Answer 16

এই সমস্যার খাঁটি জাভাস্ক্রিপ্ট সমাধান এখানে। সমস্ত ব্রাউজার জুড়ে ভাল কাজ করে

<script>
    function upload_image_init(){
        var elem = document.getElementById('file');
        if(elem && document.createEvent) {
           var evt = document.createEvent("MouseEvents");
           evt.initEvent("click", true, false);
           elem.dispatchEvent(evt);
        }
    }
</script>

Answer 17

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

যদি কোনও ব্যবহারকারী যখন কিছু ক্লিক করেন তখন আপনার যদি কেবল ফাইল ডায়ালগের প্রয়োজন হয়, তবে বলুন যে আপনি ফাইল আপলোড বোতামের চেয়ে আরও ভাল দেখতে চান, তবে আপনি শন ইনমান কী নিয়ে এসেছিলেন তা একবার দেখে নিতে পারেন ।

আমি কী-ডাউন, কীপ্রেস এবং কীআপ ইভেন্টগুলির মধ্যে নিয়ন্ত্রণের বাইরে এবং বাইরে নিয়ন্ত্রণের সৃজনশীল স্থানান্তরিত করে কীবোর্ড ট্রিগার করতে সক্ষম হয়েছি। YMMV।

আমার আন্তরিক পরামর্শটি এটিকে একা ছেড়ে চলে যেতে হবে, কারণ এটি ব্রাউজার-অসম্পূর্ণতা-বেদনার একটি পৃথিবী। গৌণ ব্রাউজার আপডেটগুলি সতর্কতা ছাড়াই কৌশলগুলি অবরুদ্ধ করতে পারে এবং এটি চালিয়ে যাওয়ার জন্য আপনাকে পুনরায় উদ্ভাবন করতে থাকতে পারে।

Answer 18

কিছুক্ষণ আগে আমি এটি নিয়ে গবেষণা করছি কারণ আমি একটি কাস্টম বোতাম তৈরি করতে চেয়েছিলাম যা ফাইল ডায়লগটি খোলার সাথে সাথে আপলোডটি শুরু করতে পারে। আমি সবেমাত্র এমন কিছু লক্ষ্য করেছি যা এটি সম্ভব করে তুলতে পারে - আপনি আপলোডের যে কোনও জায়গায় ক্লিক করলে ফায়ারফক্স ডায়ালগটি খুলবে বলে মনে হয়। সুতরাং নিম্নলিখিত এটি করতে পারে:

1. আপনি ফাইল বাটন হিসাবে ব্যবহার করতে চান এমন একটি ফাইল আপলোড এবং একটি পৃথক উপাদান তৈরি করুন
2. ওভারল্যাপ করার জন্য এবং ফাইল উপাদানটিকে ব্যাকগ্রাউড এবং সীমানা স্বচ্ছ করার জন্য তাদের সাজান যাতে বোতামটি কেবল দৃশ্যমান
3. বাটন / ফাইল ইনপুট ক্লিক করা হয় তখন ডায়লগটি খুলতে জাভাস্ক্রিপ্ট যুক্ত করুন
4. কোনও ফাইল নির্বাচন করা হলে ফর্মটি জমা দেওয়ার জন্য একটি অবিচলিত ইভেন্ট ব্যবহার করুন

এটি কেবলমাত্র তাত্ত্বিক যেহেতু আমি সমস্যা সমাধানের জন্য ইতিমধ্যে অন্য পদ্ধতি ব্যবহার করেছি তবে এটি কেবল কার্যকর হতে পারে।

Answer 19

আমি একটি ছিল <input type="button"> ভিউ থেকে ট্যাগ লুকানো । আমি যা করেছি তা সংযুক্ত করা হয়েছিল"onClick" কোনও লেবেলের মতো কোনও দৃশ্যমান উপাদানগুলিতে ইভেন্টটি । এটি গুগল ক্রোমের বিকাশকারী সরঞ্জাম বা মোজিলা ফায়ারফক্সের ফায়ারব্যাগ ব্যবহার করে ডান ক্লিক করে "সম্পাদনা এইচটিএমএল" কমান্ডটি ব্যবহার করে করা হয়েছিল। এই ইভেন্টে নিম্নলিখিত স্ক্রিপ্ট বা অনুরূপ কিছু নির্দিষ্ট করুন:

আপনার যদি জিকিউরি থাকে:

$('#id_of_component').click();

যদি না:

document.getElementById('id_of_component').click();

ধন্যবাদ।

Answer 20

আরে এই সমাধান কাজ করে। ডাউনলোডের জন্য আমাদের MSBLOB ব্যবহার করা উচিত

$scope.getSingleInvoicePDF = function(invoiceNumberEntity) {
   var fileName = invoiceNumberEntity + ".pdf";
   var pdfDownload = document.createElement("a");
   document.body.appendChild(pdfDownload);

   AngularWebService.getFileWithSuffix("ezbillpdfget",invoiceNumberEntity,"pdf" ).then(function(returnedJSON) {
       var fileBlob = new Blob([returnedJSON.data], {type: 'application/pdf'});
       if (navigator.appVersion.toString().indexOf('.NET') > 0) { // for IE browser
           window.navigator.msSaveBlob(fileBlob, fileName);
       } else { // for other browsers
           var fileURL = window.URL.createObjectURL(fileBlob);
           pdfDownload.href = fileURL;
           pdfDownload.download = fileName;
           pdfDownload.click();      
       }
   });
};

অ্যাঙ্গুলারজেএস বা এমনকি সাধারণ জাভাস্ক্রিপ্টের জন্য।

Answer 21

এটি এখন ফায়ারফক্স 4 এ সম্ভব হবে, এটি পপ-আপ উইন্ডো হিসাবে গণনা করা ক্যাভেট সহ এবং যখনই পপ-আপ উইন্ডোটি থাকত তখন তা অবরুদ্ধ হয়ে থাকবে।

Comments

আসলে ফায়ারফক্স 4 ফাইলের আপলোডের অবস্থার উন্নতি করে। আমার সমস্যা হ'ল গুগল ক্রোম ব্রাউজারে কীভাবে এটি করা যায়।

— এরিক 2

Answer 22

এখানে আমার জন্য কার্যকর সমাধান রয়েছে: সিএসএস:

#uploadtruefield {
    left: 225px;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 266px;
    opacity:0;
    -moz-opacity:0;
    filter:alpha(opacity:0);
    width: 270px;
    z-index: 2;
}

.uploadmask {
    background:url(../img/browse.gif) no-repeat 100% 50%;
}
#uploadmaskfield{
    width:132px;
}

"ছোট" JQuery সহায়তা সহ এইচটিএমএল:

<div class="uploadmask">
    <input id="uploadmaskfield" type="text" name="uploadmaskfield">
</div>
<input id="uploadtruefield"  type="file" onchange="$('#uploadmaskfield').val(this.value)" >

কেবল নিশ্চিত হয়ে নিন যে মুখোশযুক্তরা সত্যিকারের আপলোড ক্ষেত্রের দ্বারা আবৃত।

Answer 23

<a> ট্যাগে ওপেন ফাইল ডায়ালগ বক্স থেকে উত্তর হিসাবে আপনি এটি করতে পারেন

<input type="file" id="upload" name="upload" style="visibility: hidden; width: 1px;     height: 1px" multiple />
<a href="" onclick="document.getElementById('upload').click(); return false">Upload</a>

Answer 24

আমি দেখতে পেলাম যে যদি ইনপুট (ফাইল) ফর্মের বাইরে থাকে, তবে ফায়ারিং ক্লিক ইভেন্ট ফাইল ডায়ালগের ডাক দেয়।

Answer 25

আশা করি এটি কাউকে সহায়তা করে - আমি এর বিরুদ্ধে মাথা ঘুড়ে 2 ঘন্টা ব্যয় করেছি:

আইই 8 বা আইই 9 তে আপনি যদি কোনওভাবে জাভাস্ক্রিপ্টের সাথে কোনও ফাইল ইনপুট খোলার ট্রিগার করেন (বিশ্বাস করুন আমি তাদের সব চেষ্টা করেছি) তবে এটি আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে ফর্মটি জমা দিতে দিবে না, এটি নিঃশব্দে ব্যর্থ হবে।

নিয়মিত জমা বোতামের মাধ্যমে ফর্ম জমা দেওয়া কাজ করতে পারে তবে কল করার ফর্ম.সবমিট (); নিঃশব্দে ব্যর্থ হবে।

আমাকে আমার নির্বাচিত ফাইল বোতামটি স্বচ্ছ ফাইল ইনপুট দিয়ে কাজ করে যা কাজ করে ing

Comments

এছাড়াও আপনি কোনও লেবেলে ফাইলের ইনপুটটি মোড়াতে পারেন যাতে আইইতে আপনি পুরো বোতাম অঞ্চলটি toাকতে লেবেলের ক্লিকযোগ্য অঞ্চল পেতে পারেন তবে কেবলমাত্র একটি ফাইল ইনপুট ট্যাগ সহ, এর অর্ধেকই আইইতে ক্লিকযোগ্য।

— গ্যালাটিয়ানরা

Answer 26

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

<script>
    function sel_file() {
        $("input[name=userfile]").trigger('click');
    }  
</script>

<input type="file" name="userfile" id="userfile" />

<a href="javascript:sel_file();">Click</a>

Answer 27

এটি অসম্ভব:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

তবে কোনওরকম এটি কেবল তখনই কাজ করে যদি এটি কোনও ফাংশনে থাকে যা ক্লিক-ইভেন্টের মাধ্যমে ডাকা হয়েছিল।

সুতরাং আপনার নিম্নলিখিত সেটআপ থাকতে পারে:

এইচটিএমএল:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

javascript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }

Comments

createEvent()এবং initMouseEvent()অবচিত হয়েছে। আপনাকে CustomEvent()এখনই ব্যবহার করতে হবে ...

— অ্যালেক্সিস উইলকে

Answer 28

তুমি ব্যবহার করতে পার

<button id="file">select file</button>
<input type="file" name="file" id="file_input" style="display:none;">
<script>
$('#file').click(function() {
        $('#file_input').focus().trigger('click');
    });
</script>