উত্তর:
সরাসরি সমাধান না হলেও এবং এটির পক্ষে খারাপ এটি কেবল (যতদূর আমি পরীক্ষা করেছি) অনফোকাসের সাথে কাজ করে (একটি সুন্দর সীমিত ইভেন্ট ব্লক করা প্রয়োজন) আপনি নিম্নলিখিতটি দিয়ে এটি অর্জন করতে পারেন:
document.body.onfocus = function(){ /*rock it*/ }এ সম্পর্কে দুর্দান্ত, আপনি এটি ফাইলের ইভেন্টের সাথে সময়মতো সংযুক্ত / বিচ্ছিন্ন করতে পারেন এবং এটি লুকানো ইনপুটগুলি নিয়েও ভাল কাজ করবে বলে মনে হয় (আপনি যদি ক্রেডি ডিফল্ট ইনপুট টাইপের জন্য ভিজ্যুয়াল ওয়ার্কআরউন্ড ব্যবহার করছেন তবে = ' ফাইল ')। এর পরে, আপনাকে কেবল ইনপুট মানটি পরিবর্তন হয়েছে কিনা তা খুঁজে বের করতে হবে।
একটি উদাহরণ:
var godzilla = document.getElementById('godzilla')
godzilla.onclick = charge
function charge()
{
document.body.onfocus = roar
console.log('chargin')
}
function roar()
{
if(godzilla.value.length) alert('ROAR! FILES!')
else alert('*empty wheeze*')
document.body.onfocus = null
console.log('depleted')
}এটি কর্মে দেখুন: http://jsfiddle.net/Shiboe/yuK3r/6/
দুঃখের বিষয়, এটি কেবল ওয়েবকিট ব্রাউজারগুলিতে কাজ করে বলে মনে হচ্ছে। হতে পারে অন্য কেউ ফায়ারফক্স / আইই সমাধান সমাধান করতে পারেন
addEventListener("focus",fn,{once: true})। তবে আমি এটি ব্যবহার করে একেবারে গুলি ছুঁড়ে ফেলতে document.body.addEventListenerপারি নি .. কেন জানি না। পরিবর্তে আমি একই ফলাফল পেয়েছি window.addEventListener।
mousemoveইভেন্টটি শোনার window.document পাশাপাশি শোনাও সর্বত্র কাজ focusকরে windowবলে মনে হচ্ছে (কমপক্ষে আধুনিক ব্রাউজারগুলিতে, আমি গত দশকের ধ্বংসযজ্ঞের বিষয়ে চিন্তা করি না)। মূলত, কোনও ক্রিয়াকলাপ ইভেন্ট এই টাস্কের জন্য ব্যবহার করা যেতে পারে যা একটি খোলা ফাইল খোলা ডায়ালগ দ্বারা অবরুদ্ধ।
আপনি পারবেন না।
ফাইল সংলাপের ফলাফল ব্রাউজারের সামনে প্রকাশিত হয় না।
changeইভেন্ট প্রেরণ করা হয় না ।
changeজন্য কোনও ইভেন্ট প্রেরণ করা হবে না।
আমি একটি উপন্যাস সমাধান নিয়ে আসার পর থেকে আমি এই প্রশ্নটিতে আমার টুপি ফেলে দেব। আমার কাছে একটি প্রগ্রেসিভ ওয়েব অ্যাপ্লিকেশন রয়েছে যা ব্যবহারকারীদের ফটো এবং ভিডিও ক্যাপচার করতে এবং সেগুলি আপলোড করতে দেয় upload সম্ভব হলে আমরা ওয়েবআরটিটিসি ব্যবহার করি তবে কম সমর্থন * কাশি সাফারি কাশি * এর ডিভাইসগুলির জন্য HTML5 ফাইল পিকারে ফিরে যান।আপনি যদি এমন একটি অ্যান্ড্রয়েড / আইওএস মোবাইল ওয়েব অ্যাপ্লিকেশনটিতে বিশেষভাবে কাজ করছেন যা ফটো / ভিডিওগুলি সরাসরি ক্যাপচারের জন্য নেটিভ ক্যামেরা ব্যবহার করে, তবে এটি আমার কাছে আসা সেরা সমাধান।
এই সমস্যার মূর্খতা হচ্ছে পৃষ্ঠাটি লোড হওয়ার পরে, fileহ'ল null, তবে যখন ব্যবহারকারী ডায়ালগটি খুলুন এবং "বাতিল করুন" টিপেন, fileতবুও nullএটি "পরিবর্তন" হয়নি, সুতরাং কোনও "পরিবর্তন" ইভেন্টটি ট্রিগার করা হয় না। ডেস্কটপগুলির জন্য, এটি খুব খারাপ নয় কারণ বেশিরভাগ ডেস্কটপ ইউআই কখন বাতিল করা হয় তা জানার উপর নির্ভর করে না, তবে মোবাইল ইউআই যা কোনও ফটো / ভিডিও ক্যাপচারের জন্য ক্যামেরা নিয়ে আসে তা খুব বুদ্ধিমান যখন একটি বাতিল টেপা হলে উপর নির্ভরশীল।
আমি মূলত ব্যবহৃত document.body.onfocusব্যবহারকারী কখন ফাইল পিকার থেকে ফিরে এসেছিল তা সনাক্ত করার জন্য ইভেন্টটি এবং এটি বেশিরভাগ ডিভাইসের জন্য কাজ করেছে, তবে ইভেন্টটি ট্রিগার না হওয়ার কারণে আইওএস 11.3 এটিকে ভেঙে দিয়েছে।
পৃষ্ঠার বর্তমানে অগ্রভূমি বা ব্যাকগ্রাউন্ডে রয়েছে কিনা তা নির্ধারণ করতে সিপিইউয়ের সময় নির্ধারণের জন্য এটির আমার সমাধানটি * কাঁপুন *। মোবাইল ডিভাইসগুলিতে, অগ্রভাগে থাকা অ্যাপটিতে প্রসেসিংয়ের সময় দেওয়া হয়। যখন কোনও ক্যামেরা দৃশ্যমান হয় এটি সিপিইউ সময় চুরি করে ব্রাউজারকে বঞ্চিত করবে। আমাদের কেবল কী করতে হবে তা পরিমাপ করার জন্য যে আমাদের পৃষ্ঠাটি কত প্রসেসিং সময় দেওয়া হয়, যখন ক্যামেরা চালু হয় তখন আমাদের উপলব্ধ সময়টি খুব কমবে। যখন ক্যামেরাটি বরখাস্ত হয় (হয় বাতিল বা অন্যথায়), তখন আমাদের উপলভ্য সময়টি ব্যাক আপ হয়।
setTimeout()এক্স মিলিসেকেন্ডে কলব্যাক শুরু করার মাধ্যমে আমরা সিপিইউয়ের সময় পরিমাপ করতে পারি এবং তারপরে পরিমাপ করতে পারি যে এটি গ্রহণ করতে আসলে এটি কত সময় নিয়েছিল। এক্স মিলিসেকেন্ডের পরে ব্রাউজারটি কখনই একেবারে অনুরোধ করবে না , তবে এটি যদি যুক্তিসঙ্গত হয় তবে অবশ্যই আমাদের অগ্রভাগে থাকা উচিত। যদি ব্রাউজারটি খুব বেশি দূরে থাকে (অনুরোধের চেয়ে 10x এর বেশি ধীর) তবে আমাদের অবশ্যই পটভূমিতে থাকতে হবে। এর একটি প্রাথমিক বাস্তবায়ন এরকম:
function waitForCameraDismiss() {
const REQUESTED_DELAY_MS = 25;
const ALLOWED_MARGIN_OF_ERROR_MS = 25;
const MAX_REASONABLE_DELAY_MS =
REQUESTED_DELAY_MS + ALLOWED_MARGIN_OF_ERROR_MS;
const MAX_TRIALS_TO_RECORD = 10;
const triggerDelays = [];
let lastTriggerTime = Date.now();
return new Promise((resolve) => {
const evtTimer = () => {
// Add the time since the last run
const now = Date.now();
triggerDelays.push(now - lastTriggerTime);
lastTriggerTime = now;
// Wait until we have enough trials before interpreting them.
if (triggerDelays.length < MAX_TRIALS_TO_RECORD) {
window.setTimeout(evtTimer, REQUESTED_DELAY_MS);
return;
}
// Only maintain the last few event delays as trials so as not
// to penalize a long time in the camera and to avoid exploding
// memory.
if (triggerDelays.length > MAX_TRIALS_TO_RECORD) {
triggerDelays.shift();
}
// Compute the average of all trials. If it is outside the
// acceptable margin of error, then the user must have the
// camera open. If it is within the margin of error, then the
// user must have dismissed the camera and returned to the page.
const averageDelay =
triggerDelays.reduce((l, r) => l + r) / triggerDelays.length
if (averageDelay < MAX_REASONABLE_DELAY_MS) {
// Beyond any reasonable doubt, the user has returned from the
// camera
resolve();
} else {
// Probably not returned from camera, run another trial.
window.setTimeout(evtTimer, REQUESTED_DELAY_MS);
}
};
window.setTimeout(evtTimer, REQUESTED_DELAY_MS);
});
}আমি এটি আইওএস এবং অ্যান্ড্রয়েডের সাম্প্রতিক সংস্করণে পরীক্ষা করেছি, <input />উপাদানটিতে বৈশিষ্ট্যগুলি সেট করে নেটিভ ক্যামেরা আনছি ।
<input type="file" accept="image/*" capture="camera" />
<input type="file" accept="video/*" capture="camcorder" />এটি আমার প্রত্যাশার চেয়ে অনেক বেশি ভাল কাজ করে। এটি একটি টাইমারকে 25 মিলিসেকেন্ডে চালিত হওয়ার অনুরোধ করে 10 টি ট্রায়াল চালায়। এটি তখন পরিমাপ করে যে প্রকৃতপক্ষে এটি শুরু করতে কতক্ষণ সময় লেগেছিল এবং যদি 10 টি ট্রায়ালের গড় গড় 50 মিলিসেকেন্ডের চেয়ে কম হয় তবে আমরা ধরে নিই যে আমাদের অবশ্যই অগ্রভাগে থাকা এবং ক্যামেরাটি চলে গেছে is যদি এটি 50 মিলিসেকেন্ডের বেশি হয় তবে আমাদের অবশ্যই পটভূমিতে থাকা উচিত এবং অপেক্ষা করা অবিরত করা উচিত।
আমি তার setTimeout()পরিবর্তে ব্যবহার করেছি setInterval()কারণ পরেরগুলি একাধিক অনুরোধ সারি করতে পারে যা পরস্পরের পরপরই কার্যকর হয়। এটি মারাত্মকভাবে আমাদের ডেটাতে শব্দকে বাড়িয়ে তুলতে পারে, তাই setTimeout()এটি করা একটু জটিল হলেও আমি আটকে গেলাম ।
এই নির্দিষ্ট নম্বরগুলি আমার পক্ষে ভাল কাজ করেছে, যদিও আমি কমপক্ষে একবারে দেখেছি যেখানে ক্যামেরা বরখাস্ত অকাল আগে সনাক্ত করা হয়েছিল। আমি বিশ্বাস করি এটি কারণ ক্যামেরাটি খোলার ক্ষেত্রে ধীর হতে পারে এবং ডিভাইসটি বাস্তবে ব্যাকগ্রাউন্ড হওয়ার আগে 10 টি ট্রায়াল চালাতে পারে। এই ফাংশনটি শুরু করার আগে আরও ট্রায়াল যুক্ত করা বা 25-50 মিলিসেকেন্ড অপেক্ষা করা তার জন্য কার্যকর হতে পারে।
দুর্ভাগ্যক্রমে, ডেস্কটপ ব্রাউজারগুলির জন্য এটি সত্যিই কাজ করে না। তাত্ত্বিকভাবে একই কৌশলটি সম্ভব কারণ তারা পটভূমি পৃষ্ঠাগুলির চেয়ে বর্তমান পৃষ্ঠাটিকে অগ্রাধিকার দেয়। তবে অনেকগুলি ডেস্কটপগুলির পৃষ্ঠাগুলি ব্যাকগ্রাউন্ড হওয়ার পরেও পৃষ্ঠাটি পুরো গতিতে চলমান রাখার পর্যাপ্ত সংস্থান রয়েছে, সুতরাং এই কৌশলটি বাস্তবে বাস্তবে কার্যকর হয় না।
একটি বিকল্প সমাধান অনেকেই উল্লেখ করেন না যে আমি এক্সপ্লোর করেছিলাম এটি একটি উপহাস করেছিল FileList। আমরা দিয়ে শুরু nullমধ্যে <input />এবং তারপর ব্যবহারকারী ক্যামেরা প্রর্দশিত হবে এবং বাতিল তারা ফিরে আসা null, যা একটি পরিবর্তন নয় এবং কোন ঘটনা আরম্ভ হবে। একটি সমাধান হ'ল <input />পৃষ্ঠার শুরুতে একটি ডামি ফাইল বরাদ্দ করা , সুতরাং nullএটি এমন একটি পরিবর্তন হিসাবে সেট করা যা উপযুক্ত ইভেন্টটিকে ট্রিগার করবে।
দুর্ভাগ্যক্রমে, একটি তৈরির কোনও সরকারী উপায় নেই FileList, এবং <input />উপাদানটির একটি FileListবিশেষত প্রয়োজন এবং এটি ছাড়া অন্য কোনও মান গ্রহণ করা হবে না null। স্বাভাবিকভাবেই, FileListঅবজেক্টগুলি সরাসরি নির্মাণ করা যায় না, কিছু পুরানো সুরক্ষা ইস্যুতে করুন যা আপাতদৃষ্টিতে প্রাসঙ্গিকও নয়। কোনও <input />উপাদানটির বাইরের অংশ হ'ল একমাত্র উপায় হ্যাক ব্যবহার করা যা কোনও ক্লিপবোর্ড ইভেন্টকে নকল করে ডেটা অনুলিপি করে যা এতে থাকতে পারেFileList (আপনি মূলত একটি ড্রাগ-এ-ড্রপ-এ-ফাইল-ফিকিং করছেন -আপনার ওয়েবসাইট ইভেন্ট)। এটি ফায়ারফক্সে সম্ভব, তবে আইওএস সাফারির জন্য নয়, তাই এটি আমার বিশেষ ব্যবহারের ক্ষেত্রে কার্যকর ছিল না।
এটি স্পষ্টতই হাস্যকর বলার দরকার নেই। ওয়েব পৃষ্ঠাগুলিকে শূন্য নোটিফিকেশন দেওয়া হয়েছে যে একটি গুরুতর ইউআই উপাদান পরিবর্তিত হয়েছে তা কেবল হাস্যকর। এটি সত্যই একটি বিশেষ ত্রুটি, কারণ এটি কখনই কোনও পূর্ণ-স্ক্রিন মিডিয়া ক্যাপচার ইউআইয়ের উদ্দেশ্যে তৈরি করা হয়নি, এবং "পরিবর্তন" ইভেন্টটি ট্রিগার না করা প্রযুক্তিগতভাবে অনুমেয়।
তবে , ব্রাউজার বিক্রেতারা কি এর বাস্তবতাটি চিনতে পারবেন? এটি কোনও নতুন "সম্পন্ন" ইভেন্টের মাধ্যমে সমাধান করা যেতে পারে যা কোনও পরিবর্তন না ঘটে এমনকি যদি ট্রিগার হয় বা আপনি যেভাবেই "পরিবর্তন" সঞ্চার করতে পারেন। হ্যাঁ, এটি অনুমানের বিরুদ্ধে হবে, তবে জাভাস্ক্রিপ্টের দিক থেকে আমার একটি পরিবর্তন ইভেন্ট ডুপ করা আমার পক্ষে তুচ্ছ, তবুও আমার নিজের "সম্পন্ন" ইভেন্টটি উদ্ভাবন করা মৌলিকভাবে অসম্ভব। এমনকি আমার সমাধানটি সত্যই হিউরিস্টিকস, যদি ব্রাউজারের অবস্থার কোনও গ্যারান্টি না থাকে।
যেমনটি দাঁড়িয়েছে, এই এপিআইটি মোবাইল ডিভাইসের জন্য মূলত অব্যবহৃত এবং আমি মনে করি অপেক্ষাকৃত সরল ব্রাউজার পরিবর্তন এটি ওয়েব বিকাশকারীদের জন্য * সাবান বক্স * থেকে সরিয়ে * অসীম সহজতর করে তুলতে পারে।
আপনি যখন কোনও ফাইল নির্বাচন করেন এবং খুলুন / বাতিল ক্লিক করেন, তখন inputউপাদানটির ফোকাস হ্রাস করা উচিত blur। প্রাথমিক ধরে নেওয়া যাক valueএর inputখালি থাকে, আপনার কোনো অ মান খালি blurহ্যান্ডলার একটি ঠিক আছে ইঙ্গিত হবে, এবং একটি খালি মান মানে হবে একটি বাতিল করুন।
আপডেট: blurযখন inputলুকানো থাকে তখন ট্রিগার হয় না । সুতরাং আপনি যদি অস্থায়ীভাবে প্রদর্শন করতে না চান তবে IFRAME- ভিত্তিক আপলোডগুলির সাথে এই কৌশলটি ব্যবহার করতে পারবেন না input।
blurআপনি কোনও ফাইল নির্বাচন করার পরে ট্রিগার হয় না। অন্যান্য ব্রাউজারে চেষ্টা করা হয়নি।
/* Tested on Google Chrome */
$("input[type=file]").bind("change", function() {
var selected_file_name = $(this).val();
if ( selected_file_name.length > 0 ) {
/* Some file selected */
}
else {
/* No file selected or cancel/close
dialog button clicked */
/* If user has select a file before,
when they submit, it will treated as
no file selected */
}
});elseবিবৃতিটি কখনও মূল্যায়ন হয় কিনা তা পরীক্ষা করে দেখেছেন?
এই সমাধানগুলির বেশিরভাগই আমার পক্ষে কাজ করে না।
সমস্যাটি হ'ল আপনি কখনই জানেন না যে কোন ঘটনাকে মুষ্টির সূচনা করা হবে, এটি clickনাকি change? আপনি কোনও অর্ডার ধরে নিতে পারবেন না, কারণ এটি সম্ভবত ব্রাউজারের প্রয়োগের উপর নির্ভর করে।
কমপক্ষে অপেরা এবং ক্রোমে (২০১৫ সালের শেষের দিকে) clickফাইলগুলির সাথে 'ফিলিং' ইনপুট দেওয়ার ঠিক আগে ট্রিগার করা হয়, যার ফলে আপনি কখনই ট্রিগার হতে files.length != 0দেরি না করে আপনি কখনই তার দৈর্ঘ্য জানতে পারবেন না ।clickchange
এখানে কোড:
var inputfile = $("#yourid");
inputfile.on("change click", function(ev){
if (ev.originalEvent != null){
console.log("OK clicked");
}
document.body.onfocus = function(){
document.body.onfocus = null;
setTimeout(function(){
if (inputfile.val().length === 0) console.log("Cancel clicked");
}, 1000);
};
});ক্লিক ইভেন্টটি পাশাপাশি শুনতে।
শিবোর উদাহরণ অনুসরণ করে, এখানে একটি jQuery উদাহরণ রয়েছে:
var godzilla = $('#godzilla');
var godzillaBtn = $('#godzilla-btn');
godzillaBtn.on('click', function(){
godzilla.trigger('click');
});
godzilla.on('change click', function(){
if (godzilla.val() != '') {
$('#state').html('You have chosen a Mech!');
} else {
$('#state').html('Choose your Mech!');
}
});আপনি এটি এখানে ক্রিয়াতে দেখতে পারেন: http://jsfiddle.net/T3Vwz
আপনি আগের হিসাবে একই ফাইলটি চয়ন করেন এবং আপনি বাতিল ক্লিক করুন: এই ক্ষেত্রে আপনি বাতিলটিকে ধরতে পারেন।
আপনি এটি এর মতো করতে পারেন:
<input type="file" id="myinputfile"/>
<script>
document.getElementById('myinputfile').addEventListener('change', myMethod, false);
function myMethod(evt) {
var files = evt.target.files;
f= files[0];
if (f==undefined) {
// the user has clicked on cancel
}
else if (f.name.match(".*\.jpg")|| f.name.match(".*\.png")) {
//.... the user has choosen an image file
var reader = new FileReader();
reader.onload = function(evt) {
try {
myimage.src=evt.target.result;
...
} catch (err) {
...
}
};
}
reader.readAsDataURL(f);
</script>সবচেয়ে সহজ উপায় হল অস্থায়ী স্মৃতিতে কোনও ফাইল রয়েছে কিনা তা পরীক্ষা করা। আপনি যদি প্রতিবার ফাইল ফাইল ইনপুট ক্লিক করে পরিবর্তন ইভেন্টটি পেতে চান আপনি এটি ট্রিগার করতে পারেন।
var yourFileInput = $("#yourFileInput");
yourFileInput.on('mouseup', function() {
$(this).trigger("change");
}).on('change', function() {
if (this.files.length) {
//User chose a picture
} else {
//User clicked cancel
}
});যদি মোবাইল ওয়েবকিটে কাজ করে তবে শিবির সমাধান খুব ভাল হবে। আমি যেটা সামনে আসতে পারি তা হ'ল ফাইল ইনপুট উইন্ডোটি খোলার সময় কিছু ডম অবজেক্টে মাউসমেভ ইভেন্ট শ্রোতাদের যুক্ত করা যেমন:
$('.upload-progress').mousemove(function() {
checkForFiles(this);
});
checkForFiles = function(me) {
var filefield = $('#myfileinput');
var files = filefield.get(0).files;
if (files == undefined || files[0] == undefined) $(me).remove(); // user cancelled the upload
};ফাইল ডায়লগটি খোলা থাকাকালীন পৃষ্ঠা থেকে মাউসমেভ ইভেন্টটি অবরুদ্ধ করা হয়েছে এবং এটি বন্ধ হয়ে গেলে ফাইল ইনপুটটিতে কোনও ফাইল আছে কিনা তা পরীক্ষা করে দেখুন। আমার ক্ষেত্রে আমি ফাইলটি আপলোড না হওয়া পর্যন্ত কোনও ক্রিয়াকলাপের সূচক জিনিসগুলি ব্লক করা চাই, সুতরাং আমি কেবল বাতিল হওয়ার পরে আমার সূচকটি সরাতে চাই।
তবে এটি মোবাইলের জন্য সমাধান করে না, যেহেতু সরানোর মতো কোনও মাউস নেই। আমার সমাধানটি নিখুঁত চেয়ে কম, তবে আমি এটি যথেষ্ট ভাল বলে মনে করি।
$('.upload-progress').bind('touchstart', function() {
checkForFiles(this);
});এখন আমরা একই ফাইলগুলি পরীক্ষা করতে পর্দায় একটি স্পর্শের জন্য শুনছি। আমি দৃ confident়ভাবে আত্মবিশ্বাসী যে ব্যবহারকারীর আঙ্গুলটি এই ক্রিয়াকলাপের সূচকটি বাতিল এবং বরখাস্ত করার পরে খুব দ্রুত স্ক্রিনে লাগানো হবে।
কেউ কেবল ফাইল ইনপুট পরিবর্তন ইভেন্টের ক্রিয়াকলাপ সূচকটি যুক্ত করতে পারে, তবে মোবাইলে চিত্র নির্বাচন এবং পরিবর্তন ইভেন্ট ফায়ারিংয়ের মধ্যে প্রায় কয়েক সেকেন্ড পিছিয়ে থাকে, সুতরাং ক্রিয়াকলাপের সূচকটি প্রদর্শিত হওয়ার জন্য এটির চেয়ে আরও ভাল ইউএক্স প্রক্রিয়া শুরু
আমি এটি পেয়েছি এটি এখনও সবচেয়ে সহজ।
if ($('#selectedFile')[0].files.length > 1)
{
// Clicked on 'open' with file
} else {
// Clicked on 'cancel'
}এখানে, selectedFileএকটি input type=file।
আমি জানি এটি একটি খুব পুরানো প্রশ্ন তবে ঠিক যদি এটি কাউকে সহায়তা করে তবে আমি অনমাসমোভ ইভেন্টটি বাতিলটি সনাক্ত করতে ব্যবহার করতে গিয়ে জানতে পেরেছিলাম যে অল্প সময়ের মধ্যে এইরকম দুটি বা আরও বেশি ইভেন্টের পরীক্ষা করা দরকার ছিল। এর কারণ হ'ল ব্রাউজার (ক্রোম 65) দ্বারা প্রতিটি বার সিলেক্ট ফাইল ডায়ালগ উইন্ডো থেকে কার্সারটি সরানো হয় এবং প্রতিটি সময় এটি মূল উইন্ডো থেকে বেরিয়ে আসে এবং পিছনে ফিরে আসে single মাউস আন্দোলনের ইভেন্টগুলির একটি সহজ কাউন্টার কাউন্টারটিকে শূন্যে পুনরায় সেট করতে একটি স্বল্প সময়ের মেয়াদ উত্তীর্ণের সাথে ট্রিট কাজ করেছে।
আমার ক্ষেত্রে ব্যবহারকারীরা ছবি নির্বাচন করার সময় আমাকে জমা দেওয়ার বোতামটি আড়াল করতে হয়েছিল।
এই আমি এসেছি:
$(document).on('click', '#image-field', function(e) {
$('.submit-button').prop('disabled', true)
})
$(document).on('focus', '#image-field'), function(e) {
$('.submit-button').prop('disabled', false)
})#image-fieldআমার ফাইল নির্বাচনকারী। যখন কোনওর উপর ক্লিক করা হয়, আমি ফর্ম জমা বোতামটি অক্ষম করি। মুল বক্তব্যটি হ'ল, যখন ফাইল ডায়লগটি বন্ধ হয়ে যায় - তারা কোনও ফাইল নির্বাচন করে বা বাতিল করে না - #image-fieldফোকাসটি ফিরে পেয়েছিল, তাই আমি সেই ইভেন্টটি শুনি।
হালনাগাদ
আমি দেখতে পেয়েছি, এটি সাফারি এবং পল্টেরজিস্ট / ফ্যান্টমজে কাজ করে না। আপনি যদি এটি প্রয়োগ করতে চান তবে এই তথ্যটি অ্যাকাউন্টে নিন।
শিবো এবং অ্যালেক্সের সমাধানগুলির সংমিশ্রণটি, আমি সবচেয়ে নির্ভরযোগ্য কোড পেয়েছি:
var selector = $('<input/>')
.attr({ /* just for example, use your own attributes */
"id": "FilesSelector",
"name": "File",
"type": "file",
"contentEditable": "false" /* if you "click" on input via label, this prevents IE7-8 from just setting caret into file input's text filed*/
})
.on("click.filesSelector", function () {
/* do some magic here, e.g. invoke callback for selection begin */
var cancelled = false; /* need this because .one calls handler once for each event type */
setTimeout(function () {
$(document).one("mousemove.filesSelector focusin.filesSelector", function () {
/* namespace is optional */
if (selector.val().length === 0 && !cancelled) {
cancelled = true; /* prevent double cancel */
/* that's the point of cancel, */
}
});
}, 1); /* 1 is enough as we just need to delay until first available tick */
})
.on("change.filesSelector", function () {
/* do some magic here, e.g. invoke callback for successful selection */
})
.appendTo(yourHolder).end(); /* just for example */সাধারণত, মাউসমেভ ইভেন্টটি কৌশলটি কার্যকর করে, তবে ব্যবহারকারীরা একটি ক্লিক করেন এবং তার চেয়ে বেশি:
... আমরা মাউসমেভ ইভেন্টটি পাব না তাই কলব্যাক বাতিল করবেন না। তদুপরি, যদি ব্যবহারকারী দ্বিতীয় কথোপকথন বাতিল করে এবং একটি মাউস পদক্ষেপ নেয়, আমরা 2 টি বাতিল কলব্যাক পাব। ভাগ্যক্রমে, বিশেষ jQuery ফোকাস ইন ইভেন্টটি উভয় ক্ষেত্রেই দস্তাবেজগুলিতে বুদবুদ হয়, আমাদেরকে এ জাতীয় পরিস্থিতি এড়াতে সহায়তা করে। একমাত্র সীমাবদ্ধতা হ'ল যদি কোনও ইভেন্ট ফোকাসইন হয়।
mousemoveইভেন্টটি documentধরেছিলাম। কোনও সমস্যা নেই, যখন মাউসটি সরানো হচ্ছে না, বা ফাইলটি নির্বাচন করতে কেবল কীবোর্ড ব্যবহার করুন। আমি প্রতিস্থাপন করতে ছিল mousemoveদ্বারা keydownযত তাড়াতাড়ি সম্ভব বাতিল সনাক্ত করতে, কিন্তু না "খুব তাড়াতাড়ি", যখন ডায়ালগ এখনও খোলা ছিল।
আমি দেখতে পাচ্ছি যে আমার প্রতিক্রিয়াটি বেশ পুরানো হবে, তবে কখনও কম নয়। আমিও একই সমস্যার মুখোমুখি হয়েছি। সুতরাং এখানে আমার সমাধান। সর্পযুক্ত সবচেয়ে কার্যকর কোডটি ছিল কেজিএর একটি। তবে এটি পুরোপুরি কাজ করছে না এবং কিছুটা জটিল। তবে আমি এটিকে সরল করে দিয়েছি।
এছাড়াও, প্রধান সমস্যা নির্মাতা এই সত্যটি ছিল যে, 'পরিবর্তন' ইভেন্টটি ফোকাসের পরে তাত্ক্ষণিকভাবে আসে না, তাই আমাদের কিছু সময়ের জন্য অপেক্ষা করতে হবে।
"#appendfile" - কোন ব্যবহারকারী কোনও নতুন ফাইল সংযোজন করতে ক্লিক করে। Hrefs ফোকাস ইভেন্ট পান।
$("#appendfile").one("focusin", function () {
// no matter - user uploaded file or canceled,
// appendfile gets focus
// change doesn't come instantly after focus, so we have to wait for some time
// wrapper represents an element where a new file input is placed into
setTimeout(function(){
if (wrapper.find("input.fileinput").val() != "") {
// user has uploaded some file
// add your logic for new file here
}
else {
// user canceled file upload
// you have to remove a fileinput element from DOM
}
}, 900);
});আপনি কেবল সীমিত পরিস্থিতিতে এটি সনাক্ত করতে পারেন। বিশেষত, ক্রোমে যদি কোনও ফাইল আগে নির্বাচন করা হয় এবং তারপরে ফাইল ডায়লগ ক্লিক করা হয় এবং ক্লিক করা বাতিল হয়, ক্রোম ফাইলটি সাফ করে এবং অন চেঞ্জ ইভেন্টটিকে আগুন ধরিয়ে দেয়।
https://code.google.com/p/chromium/issues/detail?id=2508
এই দৃশ্যে, আপনি অন চেঞ্জ ইভেন্টটি পরিচালনা করে এবং ফাইলগুলির সম্পত্তি পরীক্ষা করে এটি সনাক্ত করতে পারেন ।
নিম্নলিখিতটি আমার জন্য কাজ করছে বলে মনে হচ্ছে (ডেস্কটপ, উইন্ডোতে):
var openFile = function (mimeType, fileExtension) {
var defer = $q.defer();
var uploadInput = document.createElement("input");
uploadInput.type = 'file';
uploadInput.accept = '.' + fileExtension + ',' + mimeType;
var hasActivated = false;
var hasChangedBeenCalled = false;
var hasFocusBeenCalled = false;
var focusCallback = function () {
if (hasActivated) {
hasFocusBeenCalled = true;
document.removeEventListener('focus', focusCallback, true);
setTimeout(function () {
if (!hasChangedBeenCalled) {
uploadInput.removeEventListener('change', changedCallback, true);
defer.resolve(null);
}
}, 300);
}
};
var changedCallback = function () {
uploadInput.removeEventListener('change', changedCallback, true);
if (!hasFocusBeenCalled) {
document.removeEventListener('focus', focusCallback, true);
}
hasChangedBeenCalled = true;
if (uploadInput.files.length === 1) {
//File picked
var reader = new FileReader();
reader.onload = function (e) {
defer.resolve(e.target.result);
};
reader.readAsText(uploadInput.files[0]);
}
else {
defer.resolve(null);
}
};
document.addEventListener('focus', focusCallback, true); //Detect cancel
uploadInput.addEventListener('change', changedCallback, true); //Detect when a file is picked
uploadInput.click();
hasActivated = true;
return defer.promise;
}এটি Angularjs $ q ব্যবহার করে তবে প্রয়োজনে আপনার অন্য প্রতিশ্রুতি কাঠামোর সাথে এটি প্রতিস্থাপন করতে সক্ষম হওয়া উচিত।
আইই ১১, এজ, ক্রোম, ফায়ারফক্সে পরীক্ষিত, তবে ফোকাস ইভেন্টটি চালিত না করায় এটি কোনও অ্যান্ড্রয়েড ট্যাবলেটে ক্রোমে কাজ করবে বলে মনে হচ্ছে না।
fileটাইপ ক্ষেত্র, frustratingly, (ব্লার সুদৃশ্য হবে) ঘটনা অনেকটা সাড়া নেই। আমি অনেক লোককে লক্ষ্য changeভিত্তিক সমাধানের পরামর্শ দিচ্ছি এবং সেগুলি নীচে নামছে।
changeকাজ করে, তবে এর একটি বড় ত্রুটি রয়েছে (বনাম যা আমরা ঘটতে চাই তাতে)।
আপনি যখন কোনও ফাইল ক্ষেত্র সমেত একটি পৃষ্ঠা নতুন করে লোড করবেন, বাক্সটি খুলুন এবং বাতিল টিপুন। হতাশার সাথে কিছুই বদলায় না ।
আমি যা করতে বেছে নিয়েছি তা একটি গেটেড-অবস্থায় লোড করা।
section#after-imageআমার ক্ষেত্রে ফর্মটির পরবর্তী অংশটি দৃশ্য থেকে গোপন রয়েছে। আমার file fieldপরিবর্তনগুলি যখন একটি আপলোড বোতাম প্রদর্শিত হয়। সফল আপলোড হওয়ার পরে, section#after-imageপ্রদর্শিত হয়।changeইভেন্টটি এই বাতিল দ্বারা ট্রিগার করা হবে এবং সঠিক ফাইল নির্বাচন না করা পর্যন্ত আমি আমার আপলোড বোতামটি পুনরায় আড়াল করতে পারি (এবং কর)।আমি ভাগ্যবান যে এই গেটেড-রাজ্যটি ইতিমধ্যে আমার ফর্মের নকশা ছিল। আপনার কেবল একই স্টাইলটি ব্যবহার করার দরকার নেই, কেবল আপলোড বোতামটি গোপনে রাখা এবং পরিবর্তনের পরে, কোনও গোপন ক্ষেত্র বা জাভাস্ক্রিপ্ট ভেরিয়েবল সেট করে যা আপনি জমা দিতে পারেন তা নির্ধারণ করতে পারেন।
ফিল্ডের সাথে যোগাযোগের আগে আমি ফাইলগুলির মান [0] পরিবর্তন করার চেষ্টা করেছি। এটি অন্বেষণ সংক্রান্ত কিছু করেনি।
সুতরাং হ্যাঁ, changeকাজ করে, কমপক্ষে যতটা আমরা পেতে চলেছি তত ভাল। ফাইলফিল্ডটি সুস্পষ্ট কারণে সুরক্ষিত তবে সুচিন্তিত বিকাশকারীদের হতাশায়।
এটি আমার উদ্দেশ্য অনুসারে উপযুক্ত নয়, তবে আপনি সম্ভবত onclickএকটি সতর্কতা প্রম্পট লোড করতে সক্ষম হবেন (এটি নয় alert(), কারণ এটি পৃষ্ঠা-প্রক্রিয়াকরণকে স্টল করে) এবং যদি পরিবর্তনটি ট্রিগার করা হয় এবং ফাইলগুলি [0] নਾਲ হয় তবে এটি লুকিয়ে রাখুন। যদি পরিবর্তনটি ট্রিগার না করা হয় তবে ডিভটি তার রাজ্যে থেকে যায়।
এটি করার একটি হ্যাকিশ উপায় আছে (কলব্যাক যুক্ত করুন বা alert()কলগুলির পরিবর্তে কিছু পিছিত / প্রতিশ্রুতি বাস্তবায়ন সমাধান করুন ):
var result = null;
$('<input type="file" />')
.on('change', function () {
result = this.files[0];
alert('selected!');
})
.click();
setTimeout(function () {
$(document).one('mousemove', function () {
if (!result) {
alert('cancelled');
}
});
}, 1000);এটি কীভাবে কাজ করে: ফাইল নির্বাচন ডায়ালগটি খোলা থাকাকালীন দস্তাবেজটি মাউস পয়েন্টার ইভেন্টগুলি গ্রহণ করে না। ডায়ালগটি প্রকৃতপক্ষে প্রদর্শিত হতে এবং ব্রাউজার উইন্ডোটি ব্লক করার জন্য 1000 মিমি বিলম্ব হয়। ক্রোম এবং ফায়ারফক্সে চেক করা হয়েছে (কেবল উইন্ডোজ)।
তবে অবশ্যই বাতিল ডায়ালগটি সনাক্ত করার জন্য এটি নির্ভরযোগ্য উপায় নয়। যদিও, আপনার জন্য কিছু ইউআই আচরণ উন্নত করতে পারে।
ফাইল ইনপুট ফোকাস (কোনও টাইমার ব্যবহার না করে) ব্যবহার করে আমার সমাধান এখানে দেওয়া হয়েছে
var fileInputSelectionInitiated = false;
function fileInputAnimationStart() {
fileInputSelectionInitiated = true;
if (!$("#image-selector-area-icon").hasClass("fa-spin"))
$("#image-selector-area-icon").addClass("fa-spin");
if (!$("#image-selector-button-icon").hasClass("fa-spin"))
$("#image-selector-button-icon").addClass("fa-spin");
}
function fileInputAnimationStop() {
fileInputSelectionInitiated = false;
if ($("#image-selector-area-icon").hasClass("fa-spin"))
$("#image-selector-area-icon").removeClass("fa-spin");
if ($("#image-selector-button-icon").hasClass("fa-spin"))
$("#image-selector-button-icon").removeClass("fa-spin");
}
$("#image-selector-area-wrapper").click(function (e) {
$("#fileinput").focus();
$("#fileinput").click();
});
$("#preview-image-wrapper").click(function (e) {
$("#fileinput").focus();
$("#fileinput").click();
});
$("#fileinput").click(function (e) {
fileInputAnimationStart();
});
$("#fileinput").focus(function (e) {
fileInputAnimationStop();
});
$("#fileinput").change(function(e) {
// ...
}Error: { "message": "Uncaught SyntaxError: missing ) after argument list", "filename": "https://stacksnippets.net/js", "lineno": 51, "colno": 1 }
এটি সর্বোত্তমভাবে হ্যাকি, তবে কোনও ব্যবহারকারী কোনও ফাইল আপলোড করেছেন কিনা তা সনাক্ত করার জন্য এবং আমার সমাধানের একটি কার্যকারী উদাহরণ এখানে রয়েছে এবং কেবলমাত্র তারা কোনও ফাইল আপলোড করেছে তবে তাদের এগিয়ে যাওয়ার অনুমতি দেয়।
মূলত আড়াল Continue, Save, Proceedবা যাই হোক না কেন আপনার বাটন নেই। তারপরে জাভাস্ক্রিপ্টে আপনি ফাইলের নামটি ধরবেন। যদি ফাইলের নামের মান না থাকে তবে Continueবোতামটি প্রদর্শন করবেন না । যদি এর কোনও মান থাকে তবে বোতামটি দেখান। তারা প্রথমে কোনও ফাইল আপলোড করে এবং তারপরে তারা একটি ভিন্ন ফাইল আপলোড করার চেষ্টা করে এবং বাতিল ক্লিক করে This
কোডটি এখানে।
এইচটিএমএল:
<div class="container">
<div class="row">
<input class="file-input" type="file" accept="image/*" name="fileUpload" id="fileUpload" capture="camera">
<label for="fileUpload" id="file-upload-btn">Capture or Upload Photo</label>
</div>
<div class="row padding-top-two-em">
<input class="btn btn-success hidden" id="accept-btn" type="submit" value="Accept & Continue"/>
<button class="btn btn-danger">Back</button>
</div></div>javascript:
$('#fileUpload').change(function () {
var fileName = $('#fileUpload').val();
if (fileName != "") {
$('#file-upload-btn').html(fileName);
$('#accept-btn').removeClass('hidden').addClass('show');
} else {
$('#file-upload-btn').html("Upload File");
$('#accept-btn').addClass('hidden');
}
});সিএসএস:
.file-input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.file-input + label {
font-size: 1.25em;
font-weight: normal;
color: white;
background-color: blue;
display: inline-block;
padding: 5px;
}
.file-input:focus + label,
.file-input + label:hover {
background-color: red;
}
.file-input + label {
cursor: pointer;
}
.file-input + label * {
pointer-events: none;
}সিএসএসের জন্য এর অনেকগুলি হ'ল ওয়েবসাইট এবং বোতামটি সবার জন্য অ্যাক্সেসযোগ্য। আপনার পছন্দ মত যা আপনার বোতাম শৈলী।
ঠিক আছে, এটি আপনার প্রশ্নের সঠিক উত্তর দেয় না। আমার ধারনাটি হ'ল, আপনার একটি দৃশ্যাবলী আছে, যখন আপনি কোনও ফাইল ইনপুট যুক্ত করেন এবং ফাইল নির্বাচন করার আবেদন করেন এবং যদি ব্যবহারকারী হিট বাতিল করে দেয় তবে আপনি কেবল ইনপুটটি সরিয়ে ফেলবেন।
যদি এটি হয়, তবে: খালি ফাইল ইনপুট কেন যুক্ত করবেন?
ফ্লাইতে একটি তৈরি করুন, তবে এটি পূর্ণ হলেই এটি ডওমে যুক্ত করুন so
var fileInput = $("<input type='file' name='files' style='display: none' />");
fileInput.bind("change", function() {
if (fileInput.val() !== null) {
// if has value add it to DOM
$("#files").append(fileInput);
}
}).click();সুতরাং এখানে আমি ফ্লাইতে <ইনপুট টাইপ = "ফাইল" /> তৈরি করি, এটির পরিবর্তনের ইভেন্টের সাথে আবদ্ধ করুন এবং তারপরে অবিলম্বে ক্লিক শুরু করুন। পরিবর্তনের সময় কেবল তখনই গুলি চলতে পারে যখন ব্যবহারকারী কোনও ফাইল নির্বাচন করে ওকে হিট করে, অন্যথায় ইনপুটটি ডিওমে যুক্ত করা হবে না, সুতরাং জমা দেওয়া হবে না।
এখানে কাজের উদাহরণ: https://jsfiddle.net/69g0Lxno/3/
আপনার যদি ইতিমধ্যে JQuery এর প্রয়োজন হয় তবে এই সমাধানটি কাজ করতে পারে (এটি আমার ক্ষেত্রে প্রকৃত একই কোডের প্রয়োজন, যদিও একটি প্রতিশ্রুতি ব্যবহার করা কোডটি ফাইল নির্বাচনের সমাধান না হওয়া পর্যন্ত অপেক্ষা করতে বাধ্য করা):
await new Promise(resolve => {
const input = $("<input type='file'/>");
input.on('change', function() {
resolve($(this).val());
});
$('body').one('focus', '*', e => {
resolve(null);
e.stopPropagation();
});
input.click();});
এই থ্রেডে বেশ কয়েকটি প্রস্তাবিত সমাধান রয়েছে এবং ব্যবহারকারী যখন ফাইল নির্বাচন বাক্সে "বাতিল" বোতামটি ক্লিক করেন তখন এটি সনাক্ত করতে সমস্যা হয় যা অনেক লোককে প্রভাবিত করে।
আসল বিষয়টি হ'ল ব্যবহারকারী যদি ফাইল নির্বাচন বাক্সে "বাতিল" বোতামটি ক্লিক করেন তা সনাক্ত করার জন্য কোনও 100% নির্ভরযোগ্য উপায় নেই । তবে ব্যবহারকারীরা ইনপুট ফাইলটিতে কোনও ফাইল যুক্ত করেছে কিনা তা নির্ভরযোগ্যভাবে সনাক্ত করার উপায় রয়েছে । সুতরাং এই এই উত্তর এর মৌলিক কৌশল!
আমি এই উত্তরটি যুক্ত করার সিদ্ধান্ত নিয়েছি কারণ স্পষ্টতই অন্যান্য উত্তরগুলি বেশিরভাগ ব্রাউজারগুলিতে কাজ করে না বা মোবাইল ডিভাইসে গ্যারান্টিযুক্ত।
সংক্ষেপে কোডটি 3 পয়েন্টের উপর ভিত্তি করে:
আরও ভাল বোঝার জন্য নীচের কোড এবং নোটগুলিও দেখুন।
[...]
<button type="button" onclick="addIptFl();">ADD INPUT FILE!</button>
<span id="ipt_fl_parent"></span>
[...]function dynIptFl(jqElInst, funcsObj) {
if (typeof funcsObj === "undefined" || funcsObj === "") {
funcsObj = {};
}
if (funcsObj.hasOwnProperty("before")) {
if (!funcsObj["before"].hasOwnProperty("args")) {
funcsObj["before"]["args"] = [];
}
funcsObj["before"]["func"].apply(this, funcsObj["before"]["args"]);
}
var jqElInstFl = jqElInst.find("input[type=file]");
// NOTE: Open the file selection box via js. By Questor
jqElInstFl.trigger("click");
// NOTE: This event is triggered if the user selects a file. By Questor
jqElInstFl.on("change", {funcsObj: funcsObj}, function(e) {
// NOTE: With the strategy below we avoid problems with other unwanted events
// that may be associated with the DOM element. By Questor
e.preventDefault();
var funcsObj = e.data.funcsObj;
if (funcsObj.hasOwnProperty("after")) {
if (!funcsObj["after"].hasOwnProperty("args")) {
funcsObj["after"]["args"] = [];
}
funcsObj["after"]["func"].apply(this, funcsObj["after"]["args"]);
}
});
}
function remIptFl() {
// NOTE: Remove the input file. By Questor
$("#ipt_fl_parent").empty();
}
function addIptFl() {
function addBefore(someArgs0, someArgs1) {
// NOTE: All the logic here happens just before the file selection box opens.
// By Questor
// SOME CODE HERE!
}
function addAfter(someArgs0, someArgs1) {
// NOTE: All the logic here happens only if the user adds a file. By Questor
// SOME CODE HERE!
$("#ipt_fl_parent").prepend(jqElInst);
}
// NOTE: The input file is hidden as all manipulation must be done via js.
// By Questor
var jqElInst = $('\
<span>\
<button type="button" onclick="remIptFl();">REMOVE INPUT FILE!</button>\
<input type="file" name="input_fl_nm" style="display: block;">\
</span>\
');
var funcsObj = {
before: {
func: addBefore,
args: [someArgs0, someArgs1]
},
after: {
func: addAfter,
// NOTE: The instance with the input file ("jqElInst") could be passed
// here instead of using the context of the "addIptFl()" function. That
// way "addBefore()" and "addAfter()" will not need to be inside "addIptFl()",
// for example. By Questor
args: [someArgs0, someArgs1]
}
};
dynIptFl(jqElInst, funcsObj);
}ধন্যবাদ! = D:
আমরা নীচের মত কৌণিক অর্জন।
<input type="file" formControlName="FileUpload" click)="handleFileInput($event.target.files)" />
/>this.uploadPanel = false;
handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
console.log("ggg" + files);
this.uploadPanel = true;
}
@HostListener("window:focus", ["$event"])
onFocus(event: FocusEvent): void {
if (this.uploadPanel == true) {
console.log("cancel clicked")
this.addSlot
.get("FileUpload")
.setValidators([
Validators.required,
FileValidator.validate,
requiredFileType("png")
]);
this.addSlot.get("FileUpload").updateValueAndValidity();
}
}আপনার ইনপুটটিতে কেবল 'পরিবর্তন' শ্রোতা যুক্ত করুন যার টাইপ ফাইল। অর্থাত
<input type="file" id="file_to_upload" name="file_to_upload" />আমি jQuery ব্যবহার করে করেছি এবং স্পষ্টতই যে কেউ ভ্যালিনা জেএস ব্যবহার করতে পারে (প্রয়োজনীয়তা অনুযায়ী)।
$("#file_to_upload").change(function() {
if (this.files.length) {
alert('file choosen');
} else {
alert('file NOT choosen');
}
});.change()যদি ব্যবহারকারী ফাইল বাছাইকারীটিতে "বাতিল" ক্লিক করে তবে নির্ভরযোগ্যভাবে বলা হয় না।
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div id="cancel01">
<button>Cancel</button>
</div>
<div id="cancel02">
<button>Cancel</button>
</div>
<div id="cancel03">
<button>Cancel</button>
</div>
<form>
<input type="file" name="name" placeholder="Name" />
</form>
<script>
const nameInput = document.querySelector('input[type="file"]');
/******
*The below code if for How to detect when cancel is clicked on file input
******/
nameInput.addEventListener('keydown', e => {
/******
*If the cancel button is clicked,then you should change the input file value to empty
******/
if (e.key == 'Backspace' || e.code == 'Backspace' || e.keyCode == 8) {
console.log(e);
/******
*The below code will delete the file path
******/
nameInput.value = '';
}
});
</script>
</body>
</html>দ্রষ্টব্য: এই কোডটি বাতিলকরণ শনাক্ত করে না, এটি একটি সাধারণ ক্ষেত্রে এটি সনাক্ত করার প্রয়োজনীয়তাকে বাধা দেওয়ার একটি উপায় সরবরাহ করে যেখানে লোকেরা এটি সনাক্ত করার চেষ্টা করে।
একটি লুকানো ইনপুট ব্যবহার করে ফাইল আপলোডগুলির সমাধানের সন্ধান করার জন্য আমি এখানে পৌঁছেছি, আমি বিশ্বাস করি যে ফাইল ইনপুট বাতিলকরণ সনাক্তকরণের উপায় অনুসন্ধান করার জন্য এটি সর্বাধিক সাধারণ কারণ (ফাইলটি ডায়ালগ খুলুন -> যদি কোনও ফাইল নির্বাচন করা থাকে তবে কিছু চালান কোড, অন্যথায় কিছুই করবেন না), এখানে আমার সমাধানটি দেওয়া হয়েছে:
var fileSelectorResolve;
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.addEventListener('input', function(){
fileSelectorResolve(this.files[0]);
fileSelectorResolve = null;
fileSelector.value = '';
});
function selectFile(){
if(fileSelectorResolve){
fileSelectorResolve();
fileSelectorResolve = null;
}
return new Promise(function(resolve){
fileSelectorResolve = resolve;
fileSelector.dispatchEvent(new MouseEvent('click'));
});
}মনে রাখবেন যে কোনও ফাইল বাছাই না করা থাকলে প্রথম লাইনটি একবারে selectFile()আবার ডাকা হবে (বা fileSelectorResolve()অন্য কোথাও থেকে ফোন করলে )।
async function logFileName(){
const file = await selectFile();
if(!file) return;
console.log(file.name);
}আরেকটি উদাহরণ:
async function uploadFile(){
const file = await selectFile();
if(!file) return;
// ... make an ajax call here to upload the file ...
}আপনি ইনপুট ক্ষেত্রে একটি jquery পরিবর্তন শ্রোতা করতে পারেন এবং ক্ষেত্রের মান দ্বারা ব্যবহারকারী বাতিল বা আপলোড উইন্ডো সনাক্ত করতে পারেন।
এখানে একটি উদাহরণ:
//when upload button change
$('#upload_btn').change(function(){
//get uploaded file
var file = this.files[0];
//if user choosed a file
if(file){
//upload file or perform your desired functiuonality
}else{
//user click cancel or close the upload window
}
});
e.target.files