<ইনপুট টাইপ = "ফাইল"> কীভাবে পুনরায় সেট করবেন

Question

আমি ভিএস ২০১২ এবং জাভাস্ক্রিপ্ট সহ একটি মেট্রো অ্যাপ্লিকেশন বিকাশ করছি

আমি আমার ফাইল ইনপুটটির বিষয়বস্তুগুলি পুনরায় সেট করতে চাই:

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />

আমি এটা কিভাবে করব?

Comments

বিষয়বস্তু বলতে কী বোঝ?

— Maess

আপনার অর্থ কি, ব্যবহারকারী কোনও ফাইল নির্বাচন করার পরে, আপনি নির্বাচিত ফাইলটিকে "কিছুই না" পুনরায় সেট করতে চান?

— ddavison

সম্ভাব্য সদৃশ stackoverflow.com/questions/1043957/...

— Dhaval Marthak

এটা মনে হয় যে একটি সহজ inputElement.value = ""হিসাবে প্রস্তাব ক্লোনিং বা মোড়ানো অবলম্বন না ঠিক সূক্ষ্ম কৌতুক আছে। সিএইচ (46), আইই (11) এবং এফএফ (41)

— রবার্ট কোরিতনিক 21

এর জাভাস্ক্রিপ্ট সহ কোনও এইচটিএমএল ফাইল ইনপুট কীভাবে সাফ করতে পারব

— ফ্র্যাঙ্ক টান

Answer 1

@ ধাওয়াল-মার্থক মন্তব্যগুলিতে পোস্ট করেছেন সেই jQuery সমাধানটি স্পষ্টতই কাজ করে, তবে আপনি যদি সত্যিকারের jQuery কলটি দেখেন তবে jQuery কী করছে তা দেখতে খুব সহজ, কেবল valueএকটি খালি স্ট্রিংয়ের বৈশিষ্ট্যটি সেট করে । সুতরাং "বিশুদ্ধ" জাভাস্ক্রিপ্টে এটি হবে:

document.getElementById("uploadCaptureInputFile").value = "";

Comments

ধন্যবাদ! আপনার যদি ইতিমধ্যে jquery রেফারেন্স থাকে তবে $ ইনপুট.ভাল ("") যথারীতি কাজ করবে।

— নাটান

@ ২ য় জিএবি হুম ... আমার কেবল 45.0.1 আছে তাই আমি পরীক্ষা করতে পারছি না ... অন্য কারও?

— জর্ডান ক্যাস্পার

@ ২ য় জিএবি সংশোধন, আমার ফায়ারফক্স সবেমাত্র 46.0.1 এ আপডেট হয়েছে এবং এই কোডটি এখনও সেখানে কাজ করে। আপনি কি নিশ্চিত?

— জর্ডান ক্যাস্পার

@ জ্যাকেরেলা এটি আশ্চর্যজনক, আমার জন্য, একটি ইনপুট ফাইল নির্বাচক মানটি সুরক্ষা ব্যতিক্রম সেট করে। আমি সফলতার সাথে একমাত্র সমাধানটি হ'ল$(#myfileselector).trigger('fileselect', [1, ""]);

— ফ্রেবলবো

ইনপুট.টিপ = ''; ইনপুট.টিপ = 'ফাইল'; // উপভোগ

— ম্যাক্সাম্যাক্সম্যাক্সিমাস

Answer 2

<input type = “file”>আপনাকে <form>ট্যাগগুলিতে মোড়ানো দরকার এবং তারপরে আপনি নিজের ফর্মটি পুনরায় সেট করে ইনপুটটি পুনরায় সেট করতে পারেন:

onClick="this.form.reset()"

Comments

এটি সঠিক পদ্ধতি। এটি সমস্ত ব্রাউজারে কাজ করে এবং দুর্বৃত্ত স্ক্রিপ্টগুলিকে ফাইল ইনপুট এর .value এর সাথে গোলমাল থেকে বিরত রাখতে ব্রাউজারগুলি প্রয়োগ করে এমন কোনও সুরক্ষাগুলির সাথে বিরোধ করে না।

— ইউজিন রায়বতসেভ

কিন্ডা শীতল, যদিও আমার জন্য নয়, কারণ এটি এই ফর্মটিতে অন্যান্য ক্ষেত্রগুলিও পুনরায় সেট করে।

— স্টারওয়েভ

একটি অনুরূপ jQuery সমাধান হতে পারে $("form").get(0).reset();। .get(0)প্রকৃত ফর্ম উপাদান আসতে যাতে আপনি ব্যবহার করতে পারেন হবে reset()ফাংশন।

— tewwane

Answer 3

এটিই সেরা সমাধান:

input.value = ''

if(!/safari/i.test(navigator.userAgent)){
  input.type = ''
  input.type = 'file'
}

এখানে সমস্ত উত্তরগুলির মধ্যে এটি দ্রুততম সমাধান। কোনও ইনপুট ক্লোন নেই, কোনও ফর্ম রিসেট!

আমি এটি সমস্ত ব্রাউজারে পরীক্ষা করেছি (এটিতে আইই 8 সমর্থনও রয়েছে)।

Comments

input.typeখুব রিসেট করার কোনও নির্দিষ্ট কারণ আছে কি ? শুধুমাত্র মান নির্ধারণ করা ''প্রত্যাশিত ফলাফল দিচ্ছে।

— হর্ষিতা শেঠি

এটি onchangeএমএস এজেজে কি আগুন লাগায় ?

— হটোহোটো

@ হোটোহোটো আমি জানি না, একটি ম্যাক ওএস আছে)

— ম্যাক্সাম্যাক্সাম্যাক্সিমাস

এটির আরও কিছু উদ্দীপনা বা কিছু দরকার, আমি এই উত্তরটি খুঁজে পেতে অনেক বেশি সময় নিয়েছি, এটিই কেবলমাত্র আমি পেয়েছি যা আইইতে কাজ করে।

— sch

ইনপুট.ভ্যালু = '' আইই 11-এ কনসোলে একটি ব্যতিক্রম ছুঁড়ে। তবে ইনপুট.টিপ পুনরায় সেট করা কোনও ত্রুটি ছাড়াই সমস্ত ব্রাউজারে কাজ করে।

— মিরোস্লাভ জেসো

Answer 4

আপনার ক্ষেত্রে নিম্নলিখিতগুলি রয়েছে:

<input type="file" id="fileControl">

তাহলে ঠিক করুন:

$("#fileControl").val('');

ফাইল নিয়ন্ত্রণ পুনরায় সেট করতে।

Comments

সেরা সমাধান আইএমএইচও।

— সেরিহি ম্যাকসিমচুক

বা ডোম ব্যবহার করুন:inputFileEl.value = '';

— নিনহ ফাম

Answer 5

আপনি কেবল এটি ক্লোন করতে পারেন এবং এটিকে নিজের সাথে প্রতিস্থাপন করতে পারেন, সমস্ত ইভেন্ট এখনও সংযুক্ত করে:

<input type="file" id="control">

এবং

var input = $("#control");

function something_happens() {
    input.replaceWith(input.val('').clone(true));
};

ধন্যবাদ: CSS- কৌশলগুলি

Comments

দুর্ভাগ্যক্রমে এটি ইনপুট মানটি পুনরায় সেট করে না, এই jsFiddle দেখুন । আরও ভাল সমাধানের জন্য, এই উত্তরটি দেখুন ।

— Gyrocode.com

@ গাইরোডকোড ডট কম রিসেটের পরে ছবিটি দ্বিতীয়বার আপলোড করা হলে এই জেএসফিডাল কাজ করে না।

— সার্থক সিংহল

@ সার্থকসিংহল, দুর্ভাগ্যক্রমে আপনি ভুল কোডটি লিখেছেন, আপনার jsfiddle.net/cL1LooLe

— রজার রাসেল

@ রোজাররসেল: হুবহু ... আমি নিজেই ভাবছিলাম যে উচ্চতর উত্তরগুলি কীভাবে বলছে যে এটি কেবল একবারে কাজ করে যা একটি স্পষ্ট সূচক যে কোনও প্রকারের রেফারেন্সটি হারিয়ে যাচ্ছে। এবং এটি আসলে কেস কারণ প্রাথমিকভাবে ইনপুট রেফারেন্স তৈরি করেছিল যা পরে একটি নতুন ইনপুট উপাদান দিয়ে প্রতিস্থাপিত হয়েছিল।

— রবার্ট কোরিতনিক 21

valueঅন্যান্য উত্তরের মতো কেবল পুনরায় সেট করা ডিওএম চালিত করার চেয়ে অনেক বেশি সোজা বলে মনে হয়।

— কোডফিনিটি

Answer 6

আর একটি সমাধান (এইচটিএমএল ডিওএম উপাদান নির্বাচন না করে)

যদি আপনি সেই ইনপুটটিতে ইভেন্ট 'শ্রোতা' পরিবর্তন করেন তবে জাভাস্ক্রিপ্ট কোডে আপনি কল করতে পারেন (কিছু নির্দিষ্ট শর্তের জন্য):

event.target.value = '';

এইচটিএমএলে উদাহরণস্বরূপ:

<input type="file" onChange="onChangeFunction(event)">

এবং জাভাস্ক্রিপ্টে:

onChangeFunction(event) {
  let fileList = event.target.files;
  let file = fileList[0];
  let extension = file.name.match(/(?<=\.)\w+$/g)[0].toLowerCase(); // assuming that this file has any extension

  if (extension === 'jpg') {
    alert('Good file extension!');
  }
  else {
    event.target.value = '';
    alert('Wrong file extension! File input is cleared.');
  }

Comments

Angular2 আরেকটি উপায়: stackoverflow.com/questions/40165271/...

— Belter

এটি কেবলমাত্র ফাইলের নামগুলিতে কাজ করবে যা .ফাইল এক্সটেনশনের সামনের একক থাকে contain

— মা কোবি

এটা ঠিক, আমি কোডটি সম্পাদনা করেছি এবং একটি ফাইল এক্সটেনশন পেতে আরও সর্বজনীন পদ্ধতির সরবরাহ করেছি।

— 18

Answer 7

সমাধান

নিম্নলিখিত কোডটি jQuery নিয়ে আমার জন্য কাজ করেছিল। এটি প্রতিটি ব্রাউজারে কাজ করে এবং ইভেন্ট এবং কাস্টম বৈশিষ্ট্যগুলি সংরক্ষণ করার অনুমতি দেয়।

var $el = $('#uploadCaptureInputFile');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

ডেমো

কোড এবং প্রদর্শনের জন্য এই jsFizz দেখুন ।

লিংক

দেখুন জাভাস্ক্রিপ্ট ফাইল ইনপুট পুনরায় সেট করতে কিভাবে আরও তথ্যের জন্য।

Comments

@ আলেসাদ্রো, না, <input type="file">নির্দিষ্ট আইডি সহ কেবলমাত্র উপাদান element

— Gyrocode.com 1

ধন্যবাদ আপনার উত্তরটি পরিষ্কার করুন :) +1

— মোমবাতি

এটি আমি এখনও খুঁজে পেয়েছি এটি সবচেয়ে পরিষ্কার এবং সর্বাধিক ব্রাউজার-সম্মতিযুক্ত সমাধান - আপনাকে ধন্যবাদ।

— প্যাট

Answer 8

একটি ফাইল আপলোড বাটন পুনরায় সেট করা খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করে এত সহজ !

এটি করার কয়েকটি উপায় রয়েছে, তবে অবশ্যই অনেকগুলি ব্রাউজারে ভালভাবে কাজ করা সোজা উপায়টি দায়েরকৃত মানটিকে কিছুতেই পরিবর্তন করে না, যেভাবে আপলোড করা ফাইলটি পুনরায় সেট হয়ে যায়, কোনও কাঠামোর পরিবর্তে খাঁটি জাভাস্ক্রিপ্ট ব্যবহার করার চেষ্টা করুন, আমি এটি তৈরি করেছি নীচে কোড, কেবল এটি পরীক্ষা করে দেখুন (ES6):

function resetFile() {
  const file = document.querySelector('.file');
  file.value = '';
}

<input type="file" class="file" />
<button onclick="resetFile()">Reset file</button>

Comments

কীভাবে জ্যাকোয়ারি করবেন

— আনন্দ চৌধুরী চৌধুরী

@ আনন্দচৌধুরী এটি jQuery এর অভ্যন্তরেও কাজ করে তবে আপনি কনস্ট ফাইল = ডকুমেন্ট.কোয়ারী নির্বাচনকারী ('। ফাইল') প্রতিস্থাপন করতে পারেন; কনস্ট ফাইলের সাথে = $ ('। ফাইল'); বা কেবল $ ('। ফাইল') করুন val (""); এটি খালি করতে

— আলিরাজা

Answer 9

বিশেষ করে এর জন্য কৌণিক

document.getElementById('uploadFile').value = "";

কাজ করবে, তবে আপনি যদি কৌণিক ব্যবহার করেন তবে এটি বলবে যে "সম্পত্তি 'মান' টাইপ 'এইচটিএমলেমেন্ট'এর উপর নেই any

document.getElementById () এইচটিএমলেমেন্ট টাইপ প্রদান করে যার মধ্যে কোনও মান সম্পত্তি থাকে না। সুতরাং, এটি এইচটিএমএল ইনপুট উপাদানটিতে কাস্ট করুন

(<HTMLInputElement>document.getElementById('uploadFile')).value = "";

অতিরিক্ত: -

তবে, আমাদের কৌণিক ক্ষেত্রে ডিওএম ম্যানিপুলেশন (ডকুমেন্ট.অক্সিজ ()) ব্যবহার করা উচিত নয়।

এই কৌণিকটি করার জন্য যথাক্রমে ডকুমেন্ট.কোয়ারী নির্বাচনকারী (), ডকুমেন্ট.কোয়ারিজিলেটর সমস্ত () হ'ল @ ভিউচিল্ড, @ ভিউচিল্ডেন ইত্যাদি সরবরাহ করেছেন।

এমনকি আমি এটি পড়িনি। বিশেষজ্ঞের ব্লগ অনুসরণ করা ভাল

এই লিঙ্ক 1 , লিংক 2 দিয়ে যান

Comments

খুশি আমি কৌনিক ব্যবহার করতে হবে না!

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

নং FIX সেখানে হবে। আমি কেবল এটি পেয়েছি। আপনি তখন কোনটি ব্যবহার করছেন?

— পি সতীশ প্যাট্রো

দুঃখিত, আমি ব্যঙ্গাত্মক হয়ে যাচ্ছিলাম ... আমি কেবল ডকুমেন্ট.ইজেটমেন্টমেন্টবাইআইডি ('আপলোড ফাইল') ব্যবহার করি value মান = ""; আমি কৌনিক ব্যবহার না।

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

সুন্দর. আমি একই ভেবেছিলাম, তবে, কৌণিক / প্রতিক্রিয়া / ভিউই ব্যবহার করুন। এগুলি রাউটিং, উপাদান, পরিষেবা, ডোম ম্যানিপুলেশন ওভাররাইড বাস্তবায়নের জন্য শক্তিশালী ফ্রেমওয়ার্কগুলি রয়েছে

— পি সতীশ প্যাট্রো

Answer 10

আমি Vuejs জন্য ব্যবহার করি

   <input
          type="file"
          ref="fileref"
          @change="onChange"/>

this.$refs.fileref.value = ''

Comments

ধন্যবাদ মানুষ! আমি ভেবেছিলাম আমি কখনই ভয়েজসের সাথে সমাধান পাব না: ডি, তুমি আমার দিনকে পাগল করে দাও!

— Zsoca

মোহন মত কাজ! আপনাকে ধন্যবাদ

— এফ কিং

Answer 11

পুনর্নির্মাণ ইনপুট ফাইলটি খুব একা রয়েছে

$('input[type=file]').val(null);

আপনি যদি বাঁধাই করে থাকেন তবে ফর্মের অন্য ক্ষেত্রটি পরিবর্তনের জন্য ফাইলটি পুনরায় সেট করুন বা এজাক্স দিয়ে ফর্মটি লোড করুন।

এই উদাহরণ প্রযোজ্য

উদাহরণস্বরূপ নির্বাচক$('input[type=text]') বা ফর্মের কোনও উপাদান

ইভেন্ট click , changeবা কোনও ইভেন্ট

$('body').delegate('event', 'selector', function(){
     $('input[type=file]').val(null) ;
});

Answer 12

সঙ্গে IE 10 ব্যবহার আমি সঙ্গে সমস্যা সমাধান হয়েছে:

    var file = document.getElementById("file-input");
    file.removeAttribute('value');
    file.parentNode.replaceChild(file.cloneNode(true),file);

কোথায় :

<input accept="image/*" onchange="angular.element(this).scope().uploadFile(this)" id="file-input" type="file"/>

Answer 13

document.getElementById("uploadCaptureInputFile").value = "";

Answer 14

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

<input
    id="image"
    type="file"
    required
    ref={ref => this.fileInput = ref}
    multiple
    onChange={this.onFileChangeHandler}
/>

জমা দেওয়ার পরে মান সাফ করতে।

this.fileInput.value = "";

Answer 15

শুধু ব্যবহার করুন:

$('input[type=file]').val('');

Answer 16

কৌণিক দিয়ে আপনি একটি টেম্পলেট পরিবর্তনশীল তৈরি করতে এবং মানটি সেট করতে পারেন null

<input type="file" #fileUploader />
<button (click)="fileUploader.value = null">Reset from UI</button>

অথবা আপনি এটি পুনরায় সেট করার জন্য একটি পদ্ধতি তৈরি করতে পারেন

component.ts

  @ViewChild('fileUploader') fileUploader:ElementRef;

  resetFileUploader() { 
    this.fileUploader.nativeElement.value = null;
  }

টেমপ্লেট

<input type="file"/>
<button (click)="resetFileUploader()">Reset from Component</button>

স্ট্যাকব্লিটজ ডেমো

Answer 17

আপনি এটি পুনরায় সেট করতে পারবেন না এটি যেহেতু এটি কেবল পঠনযোগ্য একটি ফাইল। আপনি সমস্যার সমাধান করতে এটি ক্লোন করতে পারেন।

Answer 18

আপনার এটি চেষ্টা করা উচিত:

$("#uploadCaptureInputFile").val('');

Answer 19

এটি এভাবে করা যেতে পারে

var inputfile= $('#uploadCaptureInputFile')
$('#reset').on('click',function(){
inputfile.replaceWith(inputfile.val('').clone(true));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<a href="" id="reset">Reset</a>

Answer 20

আমার সেরা সমাধান

$(".file_uplaod_input").val('');  // this is working best ):

Comments

এটি প্রথম উত্তর এবং সেই উত্তরের মন্তব্য থেকে কীভাবে আলাদা?

— আকিন ওকেগবিল

Answer 21

jQuery সমাধান:

    $('input').on('change',function(){
                $(this).get(0).value = '';
                $(this).get(0).type = '';
                $(this).get(0).type = 'file';
            });

Comments

এটি কীভাবে কাজ করে তা ব্যাখ্যা করার জন্য এই উত্তরকে প্যাডিংয়ের বিষয়টি বিবেচনা করুন।

— বাগগুলি

@ বাগগুলি অনুমান করে যে এটি নিজেরাই বলে। যখন ফাইল ইনপুটটির on changeইভেন্টটি ট্রিগার করা হয় তখন মানটি সাফ হয়ে যায়। ইনপুট ধরণ থেকে ফাইল থেকে পুনরায় সেট করা হয়।

@ জর্ডি হ্যাঁ আমি জানি এটি কী করে :) আমি কেবল ভাবছিলাম যে আরও কয়েক ডজন উত্তর দিয়ে এটিকে সামনে দাঁড় করানোর চেষ্টা করা উচিত। আমি যখন পর্যালোচনা করছিলাম তখন এটি উপস্থিত হয়েছিল। তারা আসলে আপনার মন্তব্যটিকে আরও কিছুটা প্যাড করতে অনুলিপি করতে পারে। কোডটি কেন ওপিএস সমস্যা সমাধান করে কেন আপনার মনে হয় তা বোঝানোর চেষ্টা করা সর্বদা মূল্যবান।

— বাগ

Answer 22

আমি কৌণিক জন্য এনজি 2-ফাইল-আপলোড দিয়ে সমস্যার মুখোমুখি হয়েছি। আপনি যদি কৌণিকের মধ্যে সমাধানটির সন্ধান করছেন তবে নীচের কোডটি দেখুন

এইচটিএমএল:

<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

উপাদান

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('সক্রিয়ফ্রেমাইনপুটফিল ')ইনপুটফ্রেম পরিবর্তনযোগ্য: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {

`this.`**InputFrameVariable**`.nativeElement.value = '';`

};

Answer 23

<input type="file" id="mfile" name="mfile">
<p>Reset</p>

<script>
$(document).ready(function(){
$("p").click(function(){

            $("#mfile").val('');
            return false;

    });
});

Comments

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

— ডাবল-বীপ

Answer 24

আপনার ফর্মে যদি বেশ কয়েকটি ফাইল থাকে তবে কেবল সেগুলির একটির পুনরায় সেট করা চাই:

আপনি যদি ইনপুট ফাইল ফর্মটি প্রদর্শনের জন্য বুস্ট্র্যাপ, জ্যাকোয়ারি, ফাইল স্টাইল ব্যবহার করেন:

$("#"+idInput).filestyle('clear');

Answer 25

var fileInput = $('#uploadCaptureInputFile');
fileInput.replaceWith(fileInput.val('').clone(true));

Answer 26

গতিশীল নিয়ন্ত্রণের জন্যও কাজ করে।

জাভাস্ক্রিপ্ট

<input type="file" onchange="FileValidate(this)" />

function FileValidate(object) {
    if ((object.files[0].size / 1024 / 1024) > 1) {   //greater than 1 MB         
        $(object).val('');
    }     
}

JQuery

<input type="file" class="UpoloadFileSize">

$(document).ready(function () {

    $('.UpoloadFileSize').bind('change', function () {                
        if ((this.files[0].size / 1024000) > 1.5) { //greater than 1.5 MB
            $(this).val('');
            alert('Size exceeded !!');
        }
    });

});

Answer 27

function resetImageField() {
    var $el = $('#uploadCaptureInputFile');                                        
    $el.wrap('<form>').closest('form').get(0).reset();
    $el.unwrap();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="uploadCaptureInputFile" class="win-content colors" accept="image/*" />
<button onclick="resetImageField()">Reset field</button>