উত্তর:
কীভাবে সেই নোডটি সরিয়ে, একই নামে একটি নতুন তৈরি করা যায়?
জাভাস্ক্রিপ্ট সহ ফাইল ইনপুট সাফ করার 3 টি উপায় রয়েছে:
মান সম্পত্তি খালি বা নালিতে সেট করুন।
আইই 11 + এবং অন্যান্য আধুনিক ব্রাউজারগুলির জন্য কাজ করে।
একটি নতুন ফাইল ইনপুট উপাদান তৈরি করুন এবং পুরানোটি প্রতিস্থাপন করুন।
অসুবিধাটি হ'ল আপনি ইভেন্ট শ্রোতাদের এবং প্রসারিত বৈশিষ্ট্যগুলি হারাবেন।
Form.reset () পদ্ধতির মাধ্যমে মালিকের ফর্মটি পুনরায় সেট করুন।
একই মালিকের ফর্মের অন্যান্য ইনপুট উপাদানগুলিকে প্রভাবিত করতে এড়াতে, আমরা একটি নতুন খালি ফর্ম তৈরি করতে পারি এবং এই নতুন ফর্মটিতে ফাইল ইনপুট উপাদান যুক্ত করতে এবং এটি পুনরায় সেট করতে পারি। এই উপায়টি সমস্ত ব্রাউজারের জন্য কাজ করে।
আমি একটি জাভাস্ক্রিপ্ট ফাংশন লিখেছি। ডেমো: http://jsbin.com/muhipoye/1/
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){ }
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'),
parentNode = f.parentNode, ref = f.nextSibling;
form.appendChild(f);
form.reset();
parentNode.insertBefore(f,ref);
}
}
}tl; dr : আধুনিক ব্রাউজারগুলির জন্য, কেবল ব্যবহার করুন
input.value = '';কেমন:
input.type = "text";
input.type = "file";আমাকে এখনও বুঝতে হবে কেন এটি ওয়েবকিটের সাথে কাজ করে না ।
যাইহোক, এটি আই 9>, ফায়ারফক্স এবং অপেরা দিয়ে কাজ করে।
ওয়েবকিটের পরিস্থিতি হ'ল আমি মনে করি এটি ফাইলে ফিরতে অক্ষম।
আইই 8 এর সাথে পরিস্থিতিটি এটি একটি সুরক্ষা ব্যতিক্রম ছুঁড়ে দেয়।
সম্পাদনা: ওয়েবকিট, অপেরা এবং ফায়ারফক্সের জন্য এটি কাজ করে, যদিও:
input.value = '';(এই প্রস্তাব দিয়ে উপরের উত্তরটি পরীক্ষা করুন)
আমি জিসির প্রয়োজন ছাড়াই এই ক্রস ব্রাউজারটি করার একটি দুর্দান্ত ক্লিনার উপায় খুঁজে পেতে পারি কিনা তা আমি দেখতে পাব।
Edit2:
try{
inputs[i].value = '';
if(inputs[i].value){
inputs[i].type = "text";
inputs[i].type = "file";
}
}catch(e){}বেশিরভাগ ব্রাউজারের সাথে কাজ করে। আইই <9 এর সাথে কাজ করে না, এটাই সব।
ফায়ারফক্স 20, ক্রোম 24, অপেরা 12, আই 7, আই 8, আই 9 এবং আই 10 তে পরীক্ষা করা হয়েছে।
মান নির্ধারণ করা হচ্ছে '' সমস্ত ব্রাউজারে কাজ করে না।
পরিবর্তে মানটি nullপছন্দ করার জন্য সেট করার চেষ্টা করুন :
document.getElementById('your_input_id').value= null;সম্পাদনা: জেএসকে ফাইল ইনপুট সেট না করার জন্য আমি খুব বৈধ সুরক্ষার কারণ পেয়েছি, তবে ইতিমধ্যে আউটপুট নির্বাচন করে সাফ করার জন্য একটি সহজ পদ্ধতি সরবরাহ করা যুক্তিসঙ্গত বলে মনে হয় না । আমি একটি খালি স্ট্রিং ব্যবহার করার চেষ্টা করেছি তবে এটি সমস্ত ব্রাউজারগুলিতে NULLকাজ করে না , আমার চেষ্টা করা সমস্ত ব্রাউজারে কাজ করে (অপেরা, ক্রোম, এফএফ, আই 1111 এবং সাফারি)।
সম্পাদনা: দয়া করে নোট করুন যে NULLখালি স্ট্রিংয়ে সেটিং করার সময় সমস্ত ব্রাউজারে কাজ করার সেটিংস দেয় না।
all browsersএটিকে দেখছি না ... এটি আইই 8, আইই 9 বা আই 10 তে কাজ করে না (তবে আইই 11 এ কাজ করে)।
দুর্ভাগ্যক্রমে উপরের উত্তরগুলির মধ্যে কোনওটিই সমস্ত ঘাঁটিটি কভার করে না - কমপক্ষে ভ্যানিলা জাভাস্ক্রিপ্টের সাথে আমার পরীক্ষার সাথে নয়।
.value = nullফায়ারফক্স, কোম, অপেরা এবং আইই ১১ (তবে আইই 8/9/10 নয় ) তে কাজ করছে বলে মনে হচ্ছে
.cloneNode(এবং .clone()jQuery এ) ফায়ারফক্সে .valueওভারটি অনুলিপি করতে উপস্থিত হয় , সুতরাং ক্লোনটি অর্থহীন করে তোলে।
সুতরাং এখানে ভ্যানিলা জাভাস্ক্রিপ্ট ফাংশনটি আমি লিখেছি যা ফায়ারফক্স (27 এবং 28), ক্রোম (33), আইই (8, 9, 10, 11), অপেরা (17) এ কাজ করে ... বর্তমানে কেবলমাত্র এই ব্রাউজারগুলি উপলব্ধ আমার সাথে পরীক্ষা করার জন্য।
function clearFileInput(ctrl) {
try {
ctrl.value = null;
} catch(ex) { }
if (ctrl.value) {
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
}
}ctrlতাই ফাংশন হিসাবে বলা হবে পরামিতি, ফাইল ইনপুট নিজেই ...
clearFileInput(document.getElementById("myFileInput"));ifস্টেটমেন্টটি catchব্লকের ভিতরে রাখা উচিত নয় ?
null। ctrl.value = null;কোন try...catchব্লকের ভিতরে a োকানোর অর্থ কী তা বোঝার মন ? নতুন প্রশ্নের জন্য দুঃখিত।
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);- কোন মুহূর্তে আমরা মানটি সাফ করি, যেহেতু cloneNodeএটিও অনুলিপি করে?
নিম্নলিখিত কোডটি jQuery নিয়ে আমার জন্য কাজ করেছিল। এটি প্রতিটি ব্রাউজারে কাজ করে এবং ইভেন্ট এবং কাস্টম বৈশিষ্ট্যগুলি সংরক্ষণ করার অনুমতি দেয়।
var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();দেখা এই jsFizzকোড এবং প্রদর্শনের জন্য ।
আপনাকে নতুন ফাইল ইনপুট দিয়ে এটি প্রতিস্থাপন করতে হবে। এটি এখানে jQuery দিয়ে কীভাবে করা যায় তা এখানে:
var inputFile = $('input[type=field]');
inputFile.wrap('<div />');এবং যখন আপনাকে ইনপুট ক্ষেত্রটি পরিষ্কার করতে হবে তখন এই লাইনটি ব্যবহার করুন (উদাহরণস্বরূপ কোনও ইভেন্টে):
inputFile.parent().html( inputFile.parent().html() );document.getElementById('your_input_id').value=''সম্পাদনা করুন:
এটি আই ও এবং অপেরাতে কাজ করে না তবে এটি ফায়ারফক্স, সাফারি এবং ক্রোমের জন্য কাজ করে বলে মনে হচ্ছে।
আমার একই সমস্যা ছিল এবং আমি এটি নিয়ে এসেছি।
var file = document.querySelector('input');
var emptyFile = document.createElement('input');
emptyFile.type = 'file';
document.querySelector('button').onclick = function(){
file.files = emptyFile.files;
}<input type='file'>
<button>clear</button>আমি এইচটিএমএল ফাইল ইনপুট সাফ করার সহজ এবং পরিষ্কার উপায়ের সন্ধান করছিলাম, উপরের উত্তরগুলি দুর্দান্ত, তবে আমি যেটা সন্ধান করছি তার কোনও উত্তর সত্যই নেই, যতক্ষণ না ওয়েবে আমি সহজ করার জন্য একটি সুন্দর উপায় নিয়ে এসেছি:
var $input = $("#control");
$input.replaceWith($input.val('').clone(true));সমস্ত কৃতিত্ব ক্রিস কোয়ারের কাছে যায় ।
// Referneces
var control = $("#control"),
clearBn = $("#clear");
// Setup the clear functionality
clearBn.on("click", function(){
control.replaceWith( control.val('').clone( true ) );
});
// Some bound handlers to preserve when cloning
control.on({
change: function(){ console.log( "Changed" ) },
focus: function(){ console.log( "Focus" ) }
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="control">
<br><br>
<a href="#" id="clear">Clear</a>উপরোক্ত উত্তরগুলি নিম্নলিখিত কারণে কিছুটা বিশৃঙ্খল সমাধান সরবরাহ করে:
আমি থাকার মত না প্রথম এবং তারপর HTML পেয়ে, এটা খুবই জড়িত এবং নোংরা।wrapinput
ক্রস ব্রাউজার জেএস কার্যকর হয় এবং মনে হয় যে এক্ষেত্রে নির্ভরযোগ্যভাবে typeস্যুইচিং (যা আবার কিছুটা নোংরামি) ব্যবহার করে সেট valueকরার জন্য অনেক অজানা রয়েছে are''
সুতরাং আমি আপনাকে আমার jQuery ভিত্তিক সমাধান প্রস্তাব:
$('#myinput').replaceWith($('#myinput').clone())এটি যা বলে তা করে, এটি নিজের ক্লোন দিয়ে ইনপুটটি প্রতিস্থাপন করে। ক্লোনটিতে ফাইলটি নির্বাচিত হবে না।
সুবিধাদি:
ফলাফল: শুভ প্রোগ্রামার
Cross browser compatibility... আমার পরীক্ষায় দেখা যায় যে ফায়ারফক্স .valueঅংশ হিসাবে অনুলিপি করে .clone(), অতএব এটি অকেজো করে
replaceWith? আমি clone()নিজেকে ব্যবহার করছি এবং এটি ফায়ারফক্সে ভাল কাজ করছে (আমি জানি না এটি এখনও আপনার জন্য এক বছর পরে আছে কিনা =))
এখানে আমার দুটি সেন্ট, ইনপুট ফাইলগুলি অ্যারের হিসাবে সংরক্ষণ করা হয় তাই এখানে এটি কীভাবে বাতিল করা যায়
document.getElementById('selector').value = []এটি একটি খালি অ্যারে ফেরত দেয় এবং সমস্ত ব্রাউজারে কাজ করে
আমাকে যেটা সাহায্য করেছিল তা হ'ল, আমি সারিটি সাফ করার পরিবর্তে লুপ ব্যবহার করে শেষ নির্বাচিত ফাইলটি আনতে এবং আপলোড করার চেষ্টা করেছি এবং এটি কার্যকর হয়েছে। কোডটি এখানে।
for (int i = 0; i <= Request.Files.Count-1; i++)
{
HttpPostedFileBase uploadfile = files[i];
Stream fs = uploadfile.InputStream;
BinaryReader br = new BinaryReader(fs);
Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}আশা করি এটি কিছু সাহায্য করবে।
আমি বেশিরভাগ সমাধানের চেষ্টা করেছি তবে মনে হয় কেউ কাজ করেনি। তবে আমি নীচে এটির জন্য প্রায় হেঁটেছি।
ফর্মের গঠন: form=> label, inputএবং submit button। আমরা কোনও ফাইল চয়ন করার পরে, ফাইলের নামটি জাভাস্ক্রিপ্টে ম্যানুয়ালি করে লেবেল দ্বারা প্রদর্শিত হবে।
সুতরাং আমার কৌশলটি হ'ল: প্রাথমিকভাবে জমাটি buttonঅক্ষম করা হয়, কোনও ফাইল চয়ন করার পরে, জমা বোতামের disabledবৈশিষ্ট্যটি মুছে ফেলা হবে যাতে আমি ফাইল জমা দিতে পারি। আমি জমা দেওয়ার পরে, আমি labelফাইলটি সাফ করার মতো দেখতে এটি পরিষ্কার করে ফেললামinput তবে বাস্তবে নয়। তারপরে ফর্মটি জমা দেওয়া থেকে বিরত রাখতে আমি আবার জমা দেওয়ার বোতামটি অক্ষম করব।
জমা দিন button disableবা না সেট করে , আমি অন্য ফাইলটি না বাছাই করে আমি ফাইলটি অনেকবার জমা দেওয়া থেকে থামিয়ে দিই।
আমি টেক্সট টাইপ করতে পরিবর্তন করেছি এবং setAttribute ব্যবহার করে ফাইলটিতে ফিরে এসেছি
'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'
'var input=document.querySelector('#filepicture');'
if(input != null)
{
input.setAttribute("type", "text");
input.setAttribute("type", "file");
}