<इनपुट प्रकार = "फ़ाइल"> रीसेट कैसे करें

Question

मैं VS2012 और जावास्क्रिप्ट के साथ एक मेट्रो ऐप विकसित कर रहा हूं

मैं अपनी फ़ाइल इनपुट की सामग्री को रीसेट करना चाहता हूं:

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

मैं कैसे करूं?

Comments

आपको सामग्री से क्या मतलब है?

— मेस

क्या आपका मतलब है, उपयोगकर्ता द्वारा किसी फ़ाइल का चयन करने के बाद, आप चयनित फ़ाइल को "कुछ भी नहीं" पर रीसेट करना चाहते हैं?

— ddavison

के संभावित डुप्लिकेट stackoverflow.com/questions/1043957/...

— धवल Marthak

ऐसा लगता है कि एक सरल inputElement.value = ""सुझाव के अनुसार क्लोनिंग या रैपिंग का सहारा लिए बिना चाल ठीक है। CH (46), IE (11) और FF (41) में काम करता है

— रॉबर्ट कोरिटनिक

जावास्क्रिप्ट के साथ HTML फ़ाइल इनपुट

— फ्रैंक टैन

Answer 1

JQuery समाधान @ dhaval-marthak जो टिप्पणियों में पोस्ट किया गया है वह स्पष्ट रूप से काम करता है, लेकिन यदि आप वास्तविक jQuery कॉल को देखते हैं तो यह देखना बहुत आसान है कि jQuery क्या कर रहा है, बस valueएक खाली स्ट्रिंग के लिए विशेषता सेट करना । तो "शुद्ध" जावास्क्रिप्ट में यह होगा:

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

Comments

धन्यवाद! यदि आपके पास पहले से ही jquery संदर्भ है, तो $ input.val ("") हमेशा की तरह काम करेगा।

— नटन

@ 2ndGAB हम्म ... मेरे पास केवल 45.0.1 है इसलिए मैं परीक्षण नहीं कर सकता ... कोई और?

— जॉर्डन कैस्पर

@ 2ndGAB सुधार, मेरा फ़ायरफ़ॉक्स सिर्फ 46.0.1 में अपडेट हुआ और यह कोड अभी भी वहां काम करता है। क्या आप पुष्टि कर सकते हैं?

— जॉर्डन कैस्पर

@ जैकेरेला अजीब बात है, मेरे लिए, एक इनपुट फ़ाइल चयनकर्ता मान एक सुरक्षा अपवाद को सेट करता है। एकमात्र उपाय $(#myfileselector).trigger('fileselect', [1, ""]);

— जिसका

input.type = ''; input.type = 'file'; // आनंद

— मैक्समैक्समैक्सिमस

Answer 2

आपको टैग <input type = “file”>में लपेटने की आवश्यकता है <form>और फिर आप अपना फ़ॉर्म रीसेट करके इनपुट रीसेट कर सकते हैं:

onClick="this.form.reset()"

Comments

यह सही विधि है। यह सभी ब्राउज़रों में काम करता है और किसी भी सुरक्षा के साथ संघर्ष नहीं करता है जो ब्राउज़र को दुष्ट स्क्रिप्ट को फ़ाइल इनपुट-के साथ गड़बड़ करने से रोकने के लिए लागू करते हैं।

— यूजीन रियात्सेव

हालांकि, मेरे लिए नहीं बल्कि किंडा शांत है, क्योंकि यह इस रूप में अन्य क्षेत्रों को भी रीसेट करता है।

— स्टारवेट

एक समान jQuery समाधान हो सकता है $("form").get(0).reset();। .get(0)वास्तविक रूप तत्व लौट ताकि आप उपयोग कर सकते हैं reset()समारोह।

— तेयुएन

Answer 3

यह सबसे अच्छा समाधान है:

input.value = ''

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

यहां सभी उत्तरों में से यह सबसे तेज समाधान है। कोई इनपुट क्लोन नहीं, कोई फॉर्म रीसेट नहीं!

मैंने सभी ब्राउज़रों में इसकी जाँच की (इसमें IE8 समर्थन भी है)।

Comments

क्या रीसेट करने का कोई विशेष कारण input.typeभी है? केवल मान सेट करना ''अपेक्षित परिणाम दे रहा है।

— हर्षिता सेठी

यह onchangeएमएस एज में आग घटना करता है ?

— हाटहोटो

@hotohoto मुझे पता नहीं है, एक मैक ओएस है)

— मैक्समैक्समैक्सिमस

इसके लिए कुछ और अपवोट्स या कुछ की जरूरत है, मुझे इस उत्तर को खोजने में बहुत लंबा समय लगा, यह एकमात्र ऐसा है जिसे मैंने पाया कि IE पर काम करता है।

— sch

input.value = '' IE11 में कंसोल के अपवाद को फेंकता है। हालाँकि input.type को रीसेट करना सभी ब्राउज़र पर बिना किसी त्रुटि के काम करता है।

— मिरोस्लाव जस्सो

Answer 4

मामले में आपके पास निम्नलिखित हैं:

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

तो बस करो:

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

फ़ाइल नियंत्रण रीसेट करने के लिए।

Comments

सबसे अच्छा समाधान IMHO।

— सेरही मकसिमचुक

या DOM का इस्तेमाल करें:inputFileEl.value = '';

— Ninh Pham

Answer 5

आप इसे केवल क्लोन कर सकते हैं और इसे स्वयं से बदल सकते हैं, सभी घटनाओं के साथ अभी भी संलग्न हैं:

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

तथा

var input = $("#control");

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

साभार: Css-tricks.com

Comments

दुर्भाग्य से यह इनपुट मान रीसेट नहीं करता है, यह jsFiddle देखें । बेहतर समाधान के लिए, इस उत्तर को देखें ।

— Gyrocode.com

@ Gyrocode.com यह jsFiddle तब काम नहीं करता है जब छवि को रीसेट के बाद दूसरी बार अपलोड किया जाता है।

— सार्थक सिंघल

@SarthakSinghal, दुर्भाग्य से आपने गलत कोड लिखा है, आपको jsfiddle.net/cL1LooLe

— रोजर रसेल

@RogerRussel: बिल्कुल ... मैं खुद सोच रहा था कि ऊपरी उत्तर कैसे आ रहे थे कि यह केवल एक बार काम करता है जो एक स्पष्ट संकेतक है कि किसी प्रकार का संदर्भ खो रहा है। और यह वास्तव में मामला था क्योंकि शुरू में इनपुट संदर्भ बनाया गया था जिसे बाद में एक नए इनपुट तत्व के साथ बदल दिया गया था।

— रॉबर्ट कोरिटनिक

valueअन्य उत्तरों की तरह ही रीसेट करना DOM को मैनिपुलेट करने की तुलना में बहुत अधिक सीधा लगता है।

— कोडफिनिटी

Answer 6

एक और समाधान (HTML डोम तत्वों का चयन किए बिना)

यदि आपने उस इनपुट पर 'ईवेंट' ईवेंट श्रोता को जोड़ा है, तो जावास्क्रिप्ट कोड में आप कॉल कर सकते हैं (कुछ निर्दिष्ट शर्तों के लिए):

event.target.value = '';

HTML में उदाहरण के लिए:

<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

यह केवल फ़ाइल नाम पर काम करेगा जिसमें .फ़ाइल एक्सटेंशन के सामने सिर्फ एक ही है।

— मा कोबी

यह सही है, मैंने फ़ाइल एक्सटेंशन प्राप्त करने के लिए कोड को संपादित किया है और अधिक सार्वभौमिक दृष्टिकोण प्रदान किया है।

— प्रेरित किया

Answer 7

समाधान

निम्न कोड ने मेरे लिए jQuery के साथ काम किया। यह हर ब्राउज़र में काम करता है और घटनाओं और कस्टम गुणों को संरक्षित करने की अनुमति देता है।

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

डेमो

कोड और प्रदर्शन के लिए इस jsField को देखें ।

लिंक

अधिक जानकारी के लिए जावास्क्रिप्ट के साथ फ़ाइल इनपुट रीसेट करने का तरीका देखें ।

Comments

@alessadro, नहीं, केवल <input type="file">विशिष्ट आईडी वाला तत्व ।

— Gyrocode.com

धन्यवाद अपना उत्तर स्पष्ट करें :) +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 के साथ कैसे करें

— आनंद चौधरी

@AnandChoudhary यह jQuery के अंदर भी काम करता है, लेकिन आप const फ़ाइल = document.querySelector ('फ़ाइल') को प्रतिस्थापित कर सकते हैं; const फ़ाइल के साथ = $ ('। file'); या बस $ ('फ़ाइल'))। Val (""); इसे खाली करने के लिए

— एलिरेज़ा

Answer 9

विशेष रूप से कोणीय के लिए

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

काम करेगा, लेकिन अगर आप कोणीय का उपयोग करते हैं तो यह कहेंगे कि "संपत्ति 'मान' HTMLElement'any" प्रकार पर मौजूद नहीं है

document.getElementById () वह HTMLElement टाइप करता है जिसमें मान गुण नहीं होता है। इसलिए, इसे HTMLInputElement में कास्ट करें

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

अतिरिक्त: -

हालाँकि, हमें कोणीय में DOM मैनिपुलेशन (document.xyz ()) का उपयोग नहीं करना चाहिए।

ऐसा करने के लिए कोणीय ने @VIewChild, @ViewChildren, आदि प्रदान किए हैं जो क्रमशः document.querySelector (), document.queryselectorAll () हैं।

यहां तक ​​कि मैंने इसे पढ़ा नहीं है। विशेषज्ञ के ब्लॉगों का पालन करने के लिए बेहतर है

इस के माध्यम से जाने link1 , link2

Comments

मुझे खुशी है कि मुझे कोणीय का उपयोग नहीं करना है!

— user2677034

नहीं। FIx होगा। केवल मैंने इसे पाया। जो आप तब उपयोग कर रहे हैं?

— पी सतीश पात्रो

क्षमा करें, मैं व्यंग्यात्मक हो रहा था ... मैं सिर्फ document.getElementById ('uploadFile') का उपयोग करता हूं। मूल्य = ""; जैसा कि मैं कोणीय का उपयोग नहीं करता।

— user2677034

अच्छा है। मैंने भी यही सोचा था, लेकिन, कोणीय / प्रतिक्रिया / VUe का उपयोग करें। रूटिंग, कंपोनेंट, सर्विस, डोम हेरफेर के लिए ये शक्तिशाली फ्रेमवर्क हैं, जो

— P सतीश पात्रो

Answer 10

मैं vuejs के लिए उपयोग करें

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

this.$refs.fileref.value = ''

Comments

धन्यवाद दोस्त! मैंने सोचा कि मैं वुज़ू के साथ कभी हल नहीं ढूंढूंगा: डी, ​​आप मेरे दिन को पागल कर रहे हैं!

— ज़ोसाका

एक जादू की तरह काम किया! धन्यवाद

— एफ राजा

Answer 11

रिसेटिंग इनपुट फाइल बहुत सिंगल है

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

यदि आप प्रपत्र के अन्य फ़ील्ड को बदलने के लिए फ़ाइल को बाइंड करते हैं, या ajax के साथ फ़ॉर्म लोड करते हैं।

यह उदाहरण लागू है

उदाहरण के लिए चयनकर्ता$('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

मुझे एनगुलर के लिए ng2-file-upload के साथ समस्या का सामना करना पड़ा। यदि आप कोड के नीचे कोणीय संदर्भ में समाधान की तलाश कर रहे हैं

HTML:

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

अंग

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

@ViewChild('ActiveFrameinputFile ')InputFrameVariable: 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>