JQuery का उपयोग करके <इनपुट प्रकार = 'फ़ाइल' /> साफ़ करना

Question

क्या <input type='file' />jQuery के साथ नियंत्रण मूल्य को साफ़ करना संभव है ? मैंने निम्नलिखित कोशिश की है:

$('#control').attr({ value: '' }); 

लेकिन यह काम नहीं कर रहा है।

Answer 1

आसान: आप <form>तत्व के चारों ओर लपेटते हैं , फ़ॉर्म पर कॉल रीसेट करें, फिर उपयोग करके फ़ॉर्म को हटा दें .unwrap()। .clone()इस धागे में अन्यथा समाधानों के विपरीत , आप अंत में उसी तत्व के साथ समाप्त होते हैं (कस्टम गुण जो उस पर सेट किए गए थे सहित)।

परीक्षण और ओपेरा, फ़ायरफ़ॉक्स, सफारी, क्रोम और IE6 + में काम कर रहा है। अपवाद के साथ, अन्य प्रकार के फार्म तत्वों पर भी काम करता है type="hidden"।

window.reset = function(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();
}

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

<form>
  <input id="file" type="file">
  <br>
  <input id="text" type="text" value="Original">
</form>

<button onclick="reset($('#file'))">Reset file</button>
<button onclick="reset($('#text'))">Reset text</button>

JSFiddle

जैसा कि नीचे टिमो नोट करता है, अगर आपके पास फ़ील्ड के रीसेट को ट्रिगर करने के लिए बटन हैं, तो आपको ईवेंट पर <form>कॉल .preventDefault()करने से रोकना <button>होगा।

---

संपादित करें

आईई 11 में एक अनफिक्स बग के कारण काम नहीं करता है। पाठ (फ़ाइल नाम) को इनपुट पर साफ किया जाता है, लेकिन इसकी Fileसूची आबाद रहती है।

Comments

विजेता! हर ब्राउज़र में काम करता है और क्लोनिंग इनपुट क्षेत्र से बचा जाता है। लेकिन अगर क्लियर-बटन फॉर्म के अंदर हैं, तो कृपया नाम बदलकर reset()उदा। reset2(), क्योंकि कम से कम क्रोम में सभी फ़ील्ड साफ़ हो जाते हैं यदि यह है reset()। और सबमिट करने से रोकने के लिए कॉल क्लीयर करने के बाद event.preventDefault () जोड़ें। इस तरह <button onclick="reset2($('#file'));event.preventDefault()">Reset file</button>:। कार्य उदाहरण: jsfiddle.net/rPaZQ/23 ।

— तिमो क्वाकोनेन

समस्या यह है, यह कम से कम अस्थायी रूप से दस्तावेज़ को अमान्य बनाता है। (प्रपत्र में अन्य रूप नहीं हो सकते हैं।) वर्तमान में यह काम करता है या नहीं, यह किसी भी समय इसे तोड़ने के लिए स्वतंत्र है।

— cHao

@ cHao, निश्चित रूप से यह केवल सच है यदि इनपुट तत्व वास्तव में एक रूप में है, जो कि होना नहीं है।

— निंजाकन्नन

फ़ॉर्म के भीतर एक फॉर्म होने के संबंध में, आप हमेशा DOM के बाहर एक नया फॉर्म एलिमेंट बना सकते हैं, या इसे बॉडी के साथ जोड़ सकते हैं, अगर आप चाहते हैं, तो इनपुट फॉर्म को उस फॉर्म के अंदर ले जाएं। फिर आप उस नए फॉर्म को रीसेट कर देंगे, इनपुट तत्व को वापस उसी जगह ले जाएँ जहाँ वह था, और अतिरिक्त फॉर्म एलिमेंट को हटा दें।

— केविन Heidt

मैंने अभी पाया है कि यह IE 11 में काम नहीं करता है। हम PixelFileInput का उपयोग कर रहे हैं - जो इस दृष्टिकोण का उपयोग करता है। और जब पाठ और थंबनेल को साफ कर दिया जाता है, तो ऑब्जेक्ट की फ़ाइलों की सूची समान रहती है :(

— इयान ग्रिंजर

Answer 2

त्वरित उत्तर: इसे प्रतिस्थापित करें।

नीचे दिए गए कोड में मैं replaceWithjQuery विधि का उपयोग नियंत्रण को स्वयं के क्लोन के साथ बदलने के लिए करता हूं । इस नियंत्रण में होने वाली घटनाओं के लिए आपके पास कोई भी हैंडलर है, हम उन्हें भी संरक्षित करना चाहते हैं। ऐसा करने के लिए हम विधि trueके पहले पैरामीटर के रूप में पास होते हैं clone।

<input type="file" id="control"/>
<button id="clear">Clear</button>

var control = $("#control");

$("#clear").on("click", function () {
    control.replaceWith( control = control.clone( true ) );
});

फिडल: http://jsfiddle.net/jonathansampson/dAQVM/

यदि क्लोनिंग, ईवेंट हैंडलर को संरक्षित करते समय, किसी भी मुद्दे को प्रस्तुत करता है, तो आप मूल तत्व से इस नियंत्रण पर क्लिक को संभालने के लिए ईवेंट प्रतिनिधिमंडल का उपयोग करने पर विचार कर सकते हैं:

$("form").on("focus", "#control", doStuff);

यह किसी भी हैंडलर की आवश्यकता को नियंत्रित करने के लिए तत्व के साथ-साथ क्लोन करने से रोकता है।

Comments

आप। $ ('# क्लोन') पर .clone () पद्धति का भी उपयोग कर सकते हैं। रिप्लेसमेंट ($ (यह) .clone ());

— मीट्रिक 15

यह सिर्फ कुछ भी नहीं करता है - फ़ायरबग में कोई त्रुटि नहीं है। मुझे नियंत्रण जोड़ना पड़ा। अंतराल (''); इसके लिए फ़ाइल इनपुट बॉक्स को साफ़ करें। आपके कोड ने क्रोम और ie9 में काम किया है, हालांकि।

— मंसूर

यह अभी भी काम नहीं करता है। प्रतिस्थापन से पहले इसे साफ करने की आवश्यकता है। इसलिए आप .val () .replaceWith () से पहले चाहते हैं। तो यह control.val ('') होगा।

— मंसूर

मुझे नीचे एक समाधान मिला है जो इस से बहुत साफ है: stackoverflow.com/a/13351234/909944

— फिसल गया

यह उत्तर ऐतिहासिक कारणों से यहाँ है। आधुनिक ब्राउज़र समर्थन करते हैंinput.value = null;

— आंद्रे वेरलैंग

Answer 3

Jquery आपके लिए क्रॉस-ब्राउज़र / पुराने ब्राउज़र के मुद्दों का ध्यान रखने वाला है।

यह मेरे द्वारा परीक्षण किए गए आधुनिक ब्राउज़रों पर काम करता है: क्रोमियम v25, फ़ायरफ़ॉक्स v20, ओपेरा v12.14

1.9.1 का उपयोग करते हुए

एचटीएमएल

<input id="fileopen" type="file" value="" />
<button id="clear">Clear</button>

jQuery

$("#clear").click(function () {
    $("#fileopen").val("");
});

पर jsfiddle

निम्नलिखित जावास्क्रिप्ट समाधान ने ऊपर उल्लिखित ब्राउज़रों पर मेरे लिए भी काम किया।

document.getElementById("clear").addEventListener("click", function () {
    document.getElementById("fileopen").value = "";
}, false);

पर jsfiddle

मेरे पास IE के साथ परीक्षण करने का कोई तरीका नहीं है, लेकिन सैद्धांतिक रूप से यह काम करना चाहिए। यदि IE पर्याप्त अलग है कि जावास्क्रिप्ट संस्करण काम नहीं करता है क्योंकि MS ने इसे अलग तरीके से किया है, तो jquery विधि को आपके लिए मेरे साथ व्यवहार करना चाहिए, अन्यथा यह jquery टीम के साथ-साथ इसे इंगित करने के लायक होगा। विधि जिसे IE की आवश्यकता है। (मैं लोगों को यह कहते हुए देखता हूं कि "यह IE पर काम नहीं करेगा", लेकिन यह दिखाने के लिए कोई वेनिला जावास्क्रिप्ट नहीं है कि यह IE पर काम कैसे करता है (माना जाता है कि "सुरक्षा सुविधा"?), शायद इसे एमएस के लिए एक बग के रूप में भी रिपोर्ट करें (यदि वे) इसे इस तरह से गिनें), ताकि यह किसी भी नई रिलीज में ठीक हो जाए)

जैसे एक अन्य उत्तर में बताया गया है, जक्वेरी फोरम पर एक पोस्ट

 if ($.browser.msie) {
      $('#file').replaceWith($('#file').clone());
 } else {
      $('#file').val('');
 }

लेकिन jquery ने अब ब्राउज़र परीक्षण, jquery.browser के लिए समर्थन हटा दिया है ।

इस जावास्क्रिप्ट समाधान ने भी मेरे लिए काम किया, यह jquery.replaceWith विधि के समान वैनिला के बराबर है ।

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

पर jsfiddle

ध्यान देने वाली महत्वपूर्ण बात यह है कि क्लोनोडोड विधि संबद्ध ईवेंट हैंडलर को संरक्षित नहीं करती है।

इस उदाहरण को देखें।

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

document.getElementById("clear").addEventListener("click", function () {
    var fileopen = document.getElementById("fileopen"),
        clone = fileopen.cloneNode(true);

    fileopen.parentNode.replaceChild(clone, fileopen);
}, false);

पर jsfiddle

लेकिन jquery.clone यह प्रदान करता है ^{[* 1]}

$("#fileopen").change(function () {
    alert("change");
});

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

पर jsfiddle

^{[* 1]} jquery ऐसा करने में सक्षम है अगर घटनाओं को jquery के तरीकों से जोड़ा गया क्योंकि यह jquery.data में एक प्रतिलिपि रखता है , यह अन्यथा काम नहीं करता है, इसलिए यह थोड़ा धोखा / काम-के आसपास है और इसका मतलब है कि चीजें नहीं हैं विभिन्न तरीकों या पुस्तकालयों के बीच संगत।

document.getElementById("fileopen").addEventListener("change", function () {
    alert("change");
}, false);

$("#clear").click(function () {
    var fileopen = $("#fileopen"),
        clone = fileopen.clone(true);

    fileopen.replaceWith(clone);
});

पर jsfiddle

आप संलग्न ईवेंट हैंडलर को तत्व से सीधे प्राप्त नहीं कर सकते हैं।

यहाँ वेनिला जावास्क्रिप्ट में सामान्य सिद्धांत है, यह है कि कैसे एक अन्य सभी पुस्तकालयों jquery यह (मोटे तौर पर) करते हैं।

(function () {
    var listeners = [];

    function getListeners(node) {
        var length = listeners.length,
            i = 0,
            result = [],
            listener;

        while (i < length) {
            listener = listeners[i];
            if (listener.node === node) {
                result.push(listener);
            }

            i += 1;
        }

        return result;
    }

    function addEventListener(node, type, handler) {
        listeners.push({
            "node": node,
                "type": type,
                "handler": handler
        });

        node.addEventListener(type, handler, false);
    }

    function cloneNode(node, deep, withEvents) {
        var clone = node.cloneNode(deep),
            attached,
            length,
            evt,
            i = 0;

        if (withEvents) {
            attached = getListeners(node);
            if (attached) {
                length = attached.length;
                while (i < length) {
                    evt = attached[i];
                    addEventListener(clone, evt.type, evt.handler);

                    i += 1;
                }
            }
        }

        return clone;
    }

    addEventListener(document.getElementById("fileopen"), "change", function () {
        alert("change");
    });

    addEventListener(document.getElementById("clear"), "click", function () {
        var fileopen = document.getElementById("fileopen"),
            clone = cloneNode(fileopen, true, true);

        fileopen.parentNode.replaceChild(clone, fileopen);
    });
}());

पर jsfiddle

बेशक jquery और अन्य पुस्तकालयों में ऐसी सूची को बनाए रखने के लिए आवश्यक अन्य सभी समर्थन विधियाँ हैं, यह केवल एक प्रदर्शन है।

Comments

यह काम! (इस उत्तर की शुरुआत में कम से कम वेनिला जेएस बिट)। मैंने इसे नवीनतम क्रोम, फ़ायरफ़ॉक्स और IE (11) में परीक्षण किया है।

— फिल्प

मैं आपके कुछ बहुत ही उत्तरों को जोड़ने वाला था, लेकिन मुख्य रूप से यह .val('')। क्या यह अपलोड तत्व को क्लोन करने या नेस्टेड फॉर्म को जोड़ने से आसान नहीं है? +1।

— इरेनर पाज़

पहले JQuery समाधान (उपयोग करते हुए .val("")) ने पूरी तरह से काम किया, धन्यवाद। इनपुट को क्लोन करने और उसे बदलने की तुलना में बहुत सरल है।

— ह्यूगो जिंक

Answer 4

स्पष्ट सुरक्षा कारणों से आप फ़ाइल इनपुट का मान सेट नहीं कर सकते, यहां तक ​​कि एक खाली स्ट्रिंग के लिए भी।

आपको केवल उस फॉर्म को रीसेट करना है जहां फ़ील्ड या यदि आप केवल अन्य फ़ील्ड वाले फ़ॉर्म के फ़ाइल इनपुट को रीसेट करना चाहते हैं, तो इसका उपयोग करें:

function reset_field (e) {
    e.wrap('<form>').parent('form').trigger('reset');
    e.unwrap();
}​

यहाँ एक उदाहरण है: http://jsfiddle.net/v2SZJ/1/

Comments

आईई में सही ढंग से काम नहीं करता है। नेत्रहीन मान रीसेट है, लेकिन el.value अभी भी पिछले संस्करण की रिपोर्ट करता है। यह el.value को रीसेट करने में मदद करता है, लेकिन केवल IE10 + में। jsfiddle.net/9uPh5/2

— gregor

ऊपर के रूप में एक ही समाधान

— PhilT

यह गलत है, हम किसी दिए गए मान पर फ़ील्ड सेट नहीं कर सकते, लेकिन उम्मीद है कि हम इसे साफ़ कर सकते हैं।

— फ्रालबो

Answer 5

यह मेरे लिए काम करता है।

$("#file").replaceWith($("#file").clone());

http://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie

आशा है ये मदद करेगा।

Comments

मेरे लिये कार्य करता है! यह ध्यान देने योग्य है कि यदि आपके पास किसी भी श्रोता को फ़ाइल इनपुट में परिवर्तन से ट्रिगर किया गया है, तो आपको इनपुट को प्रतिस्थापित करने के बाद उन्हें फिर से असाइन करने की आवश्यकता है।

— जेकोलर्टन

Answer 6

IE8 में उन्होंने फ़ाइल अपलोड फ़ील्ड को केवल सुरक्षा के लिए पढ़ा। IE टीम ब्लॉग पोस्ट देखें :

ऐतिहासिक रूप से, HTML फ़ाइल अपलोड नियंत्रण () सूचना प्रकटीकरण कमजोरियों की एक महत्वपूर्ण संख्या का स्रोत रहा है। इन मुद्दों को हल करने के लिए, नियंत्रण के व्यवहार में दो बदलाव किए गए थे।

उन हमलों को रोकने के लिए जो "चोरी" पर भरोसा करते हैं कि कीस्ट्रोक को नियंत्रण में एक स्थानीय फ़ाइल पथ टाइप करने में उपयोगकर्ता को छल करने के लिए, फ़ाइल पथ संपादित करें बॉक्स अब केवल-पढ़ने के लिए है। उपयोगकर्ता को फ़ाइल ब्राउज़ संवाद का उपयोग करके स्पष्ट रूप से अपलोड के लिए एक फ़ाइल का चयन करना होगा।

इसके अतिरिक्त, "स्थानीय फ़ाइलों को अपलोड करते समय स्थानीय निर्देशिका पथ शामिल करें" URLAction को इंटरनेट ज़ोन के लिए "अक्षम" करने के लिए सेट किया गया है। यह परिवर्तन इंटरनेट पर संभावित संवेदनशील स्थानीय फ़ाइल-सिस्टम जानकारी के रिसाव को रोकता है। उदाहरण के लिए, पूर्ण पथ C: \ Users \ ericlaw \ दस्तावेज \ secret \ image.png सबमिट करने के बजाय, Internet Explorer 8 अब केवल फ़ाइल नाम छवि सबमिट करेगा।

Answer 7

$("#control").val('')आपको जो चाहिए वह यह है! JQuery 1.11 का उपयोग करके Chrome पर परीक्षण किया गया

अन्य उपयोगकर्ताओं ने फ़ायरफ़ॉक्स में भी परीक्षण किया है।

Comments

यहाँ पर कई अन्य पदों की व्याख्या के अनुसार, यह ब्राउज़र के अनुकूल नहीं है।

— टिस्क्यू

मेरी समझ के लिए यह कौन से ब्राउज़र में विफल है?

— हैमस्ट्रिंग

इंटरनेट एक्सप्लोरर में इनपुट प्रकार फ़ाइल के रूप में विफल IE>

— लकी

क्रोम और फ़ायरफ़ॉक्स में काम करता है। पर्याप्त से अधिक।

— naimul64

Answer 8

मैं यहां सभी विकल्पों के साथ फंस गया। यहाँ एक हैक है जो मैंने बनाया है जो काम करता है:

<form>
 <input type="file">
 <button type="reset" id="file_reset" style="display:none">
</form>

और आप इसी तरह के कोड के साथ jQuery का उपयोग करके रीसेट को ट्रिगर कर सकते हैं:

$('#file_reset').trigger('click');

(jsfiddle: http://jsfiddle.net/eCbd6/ )

Comments

ठीक है, लेकिन यह पूरे फॉर्म को साफ कर देगा .. विशिष्ट फ़ाइल इनपुट नहीं

— आशीष रतन

Answer 9

मैंने इसे समाप्त किया:

if($.browser.msie || $.browser.webkit){
  // doesn't work with opera and FF
  $(this).after($(this).clone(true)).remove();  
}else{
  this.setAttribute('type', 'text');
  this.setAttribute('type', 'file'); 
}

सबसे सुरुचिपूर्ण समाधान नहीं हो सकता है, लेकिन यह उतना ही काम करता है जितना मैं बता सकता हूं।

Comments

stackoverflow.com/questions/8378563/…

— nischayn22

क्रोम 34 (linux) में काम नहीं करता है। प्रतिस्थापन () विधि दोनों ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स) में काम करती है

— गौरव शर्मा

सबसे पहले मुझे ध्यान देना चाहिए "$ .browser को jquery 1.9 से हटा दिया गया है" लेकिन अंतिम दो पंक्तियों (टेक्स्ट में टाइप करने की विशेषता बदलकर और फिर इसे फ़ाइल पर वापस सेट कर दिया गया) पर काम किया। इसके अतिरिक्त मैंने $ ('# कंट्रोल') सेट करने की कोशिश की। वैल (''); या जावास्क्रिप्ट डॉक्यूमेंट में ।getElementById (control) .value = ''; और भी काम किया है और पता नहीं क्यों हम इस दृष्टिकोण का उपयोग नहीं करना चाहिए !? अंत में, मैंने उन दोनों का उपयोग करने का फैसला किया।

— QMaster

Answer 10

मैंने https://github.com/malsup/form/blob/master/jquery.form.js का उपयोग किया है , जिसमें एक फ़ंक्शन है clearInputs(), जिसे क्रॉसब्रोसर, अच्छी तरह से परीक्षण किया गया है, उपयोग करने में आसान है और IE मुद्दे और छिपे हुए फ़ील्ड को भी हैंडल करता है अगर जरुरत हो। हो सकता है कि केवल फ़ाइल इनपुट को साफ़ करने के लिए थोड़ा लंबा समाधान हो, लेकिन यदि आप क्रॉसब्रोसर फ़ाइल अपलोड के साथ काम कर रहे हैं, तो यह समाधान अनुशंसित है।

उपयोग आसान है:

// सभी फ़ाइल फ़ील्ड साफ़ करें:
$ ( "इनपुट: फ़ाइल") clearInputs ();।

// स्पष्ट फ़ील्ड भी छिपाएं:
$ ( "इनपुट: फ़ाइल") clearInputs (सही);।

// विशिष्ट फ़ील्ड साफ़ करें:
$ ( "# Myfilefield1, # ​​myfilefield2") clearInputs ()।;

/ **
 * चयनित प्रपत्र तत्वों को साफ़ करता है।
 * /
$ .fn.clearFields = $ .fn.clearInputs = function (शामिल) {{
    var re = / ^ (?: color | date | डेटाइम | ईमेल | महीना | नंबर | पासवर्ड | रेंज | खोज | tel। टेक्स्ट | समय | url | सप्ताह) $ / i // 'छिपी' इस सूची में नहीं है
    यह वापस लौटें। (फ़ंक्शन () {
        var t = this.type, tag = this.tagName.toLowerCase ();
        if (re.test (t) || टैग == 'textarea') {
            this.value = '';
        }
        और अगर (t == 'चेकबॉक्स' || t == 'रेडियो') {
            this.checked = false;
        }
        और अगर (टैग == 'चयन') {
            this.selectedIndex = -1;
        }
        और अगर (t == "फ़ाइल") {
            अगर (/MSIE/.test(navigator.userAgent)) {
                $ (This) .replaceWith ($ (this) .clone (सही));
            } अन्य {
                $ (This) .val ( '');
            }
        }
        और अगर (शामिल) {
            // शामिल किया गया मान सही हो सकता है, या यह चयनकर्ता स्ट्रिंग हो सकता है
            // एक विशेष परीक्षण का संकेत; उदाहरण के लिए:
            // $ ('# myForm')। ClearForm ('। विशेष: छिपा हुआ')
            // ऊपर दिए गए छिपे इनपुट्स को साफ करेगा, जिसमें 'विशेष' का वर्ग है।
            अगर ((शामिल है === सच और& /hidden/.test(t)) ||
                 (टाइपऑफ़ में शामिल हैं == 'स्ट्रिंग' && $ (यह) .is (शामिल है))
                this.value = '';
        }
    });
};

Comments

मुझे समझ में नहीं आ रहा है कि यह उत्तर अधिक उत्कीर्ण क्यों नहीं है!

— एलेक्सबी

@ एलेक्स बी: क्योंकि, जैसा कि टिमो ने समझाया था, यह सिर्फ एक फ़ाइल इनपुट फ़ील्ड को साफ़ करने के लिए ओवरकिल है।

— करवर

पता नहीं अगर वह काम किया है, लेकिन एफएफ 45.0.2 पर अधिक नहीं है :(

— fralbo

Answer 11

फ़ाइल इनपुट का मान केवल (सुरक्षा कारणों से) पढ़ा जाता है। आप इसे प्रोग्रामिक रूप से रिक्त नहीं कर सकते हैं (फॉर्म की रीसेट () विधि को कॉल करने के अलावा, जिसमें उस क्षेत्र की तुलना में व्यापक गुंजाइश है)।

Comments

मैं उलझन में हूँ - मैंने $ ("# inputControl") की कोशिश की। वैल ("") और इसने वास्तव में क्षेत्र को खाली कर दिया। क्या मैं कुछ भूल रहा हूँ?

— समपसन

@ जोनाथन, मेरे लिए भी काम करता है, लेकिन अगर आप इसे किसी और चीज़ में सेट करते हैं तो यह एक सुरक्षा त्रुटि है। FF4 में परीक्षण किया गया।

— ब्रेंडेन

रीसेट () एक जेएस देशी तरीका है इसलिए यदि आप jQuery के माध्यम से फॉर्म का चयन करते हैं तो आपको तत्व को jQuery के दायरे से बाहर निकालने की आवश्यकता है। $ ( "फ़ॉर्म # MyForm") [0] .reset ();

— क्रिस स्टीफंस

@ जोनाथन यह आपके लिए काम करता है क्योंकि आपने इसे IE में नहीं किया था। यह सुरक्षा समस्या केवल IE को रोकता है। मूल्य समाशोधन नियमित रूप से Chrome और Firefox दोनों में काम करता है, लेकिन नहीं IE

— VoidKing

Answer 12

मैं निम्नलिखित कोड के साथ काम करने में सक्षम था:

var input = $("#control");    
input.replaceWith(input.val('').clone(true));

Answer 13

मैं HTML फ़ाइल इनपुट को साफ करने के लिए सरल और स्वच्छ तरीके की तलाश में हूं, उपरोक्त उत्तर बहुत अच्छे हैं, लेकिन उनमें से कोई भी वास्तव में जवाब नहीं देता है कि मैं क्या देख रहा हूं, जब तक कि मैं वेब पर सरल तरीके से ऐसा करने के लिए नहीं आया:

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>

Answer 14

.clone()काम करता है नहीं ओपेरा में (और संभवतः अन्य) काम करते हैं। यह सामग्री रखता है।

मेरे लिए यहां सबसे करीबी तरीका जोनाथन का था, हालांकि यह सुनिश्चित करना कि इस क्षेत्र ने अपने नाम, वर्गों, आदि को मेरे मामले में गंदे कोड के लिए संरक्षित किया था।

कुछ इस तरह से काम हो सकता है (क्वेंटिन को भी धन्यवाद):

function clearInput($source) {
    var $form = $('<form>')
    var $targ = $source.clone().appendTo($form)
    $form[0].reset()
    $source.replaceWith($targ)
}

Comments

क्या सभी प्रमुख ब्राउज़रों में इसका परीक्षण किया गया है?

— शॉन

यह Chrome / FF / Opera के नवीनतम संस्करण और IE8 में ठीक काम करता है। मैं कोई भी कारण नहीं देख सकता कि यह किसी भी काम क्यों नहीं करेगा - रूपों पर रीसेट विकल्प लंबे समय से है।

— चम्मच

Answer 15

मैं निम्नलिखित का उपयोग करके इसे प्राप्त करने में कामयाब रहा हूं ...

function resetFileElement(ele) 
{
    ele.val(''); 
    ele.wrap('<form>').parent('form').trigger('reset');   
    ele.unwrap();
    ele.prop('files')[0] = null;
    ele.replaceWith(ele.clone());    
}

यह IE10, FF, क्रोम और ओपेरा में परीक्षण किया गया है।

दो कैविएट हैं ...

1. फिर भी एफएफ में ठीक से काम नहीं करता है, यदि आप पृष्ठ को ताज़ा करते हैं, तो फ़ाइल तत्व चयनित फ़ाइल के साथ फिर से आबाद हो जाता है। यह जानकारी कहाँ से मिल रही है यह मेरे से परे है। फ़ाइल इनपुट तत्व से संबंधित और क्या मैं संभव है कि स्पष्ट करने की कोशिश करूं?

2. फ़ाइल इनपुट तत्व से जुड़ी किसी भी घटना पर प्रतिनिधिमंडल का उपयोग करना याद रखें, इसलिए क्लोन बनाने के बाद भी वे काम करते हैं।

जो मुझे समझ में नहीं आता है वह यह है कि धरती पर किसने सोचा था कि आप एक अमान्य अस्वीकार्य फ़ाइल चयन से एक इनपुट फ़ील्ड को साफ़ नहीं कर सकते?

ठीक है, मुझे गतिशील रूप से मान के साथ सेट न करने दें ताकि मैं किसी उपयोगकर्ता के OS से फ़ाइलों को प्राप्त न कर सकूं, लेकिन मुझे एक अमान्य चयन को पूरी तरह से रीसेट किए बिना स्पष्ट कर देना चाहिए।

यह किसी भी तरह एक फिल्टर के अलावा और IE10 में 'स्वीकार' कुछ भी नहीं करता है, यह एमएस वर्ड माइम प्रकारों को भी नहीं समझता है, यह एक मजाक है!

Comments

यह लगभग काम करता है। फ़ायरफ़ॉक्स में इस काम को करने के लिए आपको एक चीज़ की ज़रूरत है, .pop()इसे सेट करने के बजाय फ़ाइलों की सरणी पर उपयोग करना है। यह फ़ाइल को ठीक से साफ़ करने के लिए लगता है।

— किमीकैल्डालैंड

Answer 16

मेरे फ़ायरफ़ॉक्स 40.0.3 पर केवल इसी के साथ काम करते हैं

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

Comments

। $ ( 'इनपुट [प्रकार = फ़ाइल]') replaceWith (। $ ( 'इनपुट [प्रकार = फ़ाइल]') क्लोन (सही) .val ( ''));

— आंद्रेई

Answer 17

हर ब्राउज़र में यह मेरे लिए काम करता है।

        var input = $(this);
        var next = this.nextSibling;
        var parent = input.parent();
        var form = $("<form></form>");
        form.append(input);
        form[0].reset();
        if (next) {
            $(next).before(input);
        } else {
            parent.append(input);
        }

Answer 18

मैंने उन तकनीकों का सबसे अधिक उपयोग करने की कोशिश की, जिनका उल्लेख उपयोगकर्ताओं ने किया, लेकिन उनमें से किसी ने भी सभी ब्राउज़रों में काम नहीं किया। यानी: क्लोन () फ़ाइल इनपुट के लिए एफएफ में काम नहीं करता है। मैंने फ़ाइल इनपुट को मैन्युअल रूप से कॉपी करना समाप्त कर दिया, और फिर कॉपी किए गए के साथ मूल को बदल दिया। यह सभी ब्राउज़रों में काम करता है।

<input type="file" id="fileID" class="aClass" name="aName"/>

var $fileInput=$("#fileID");
var $fileCopy=$("<input type='file' class='"+$fileInput.attr("class")+" id='fileID' name='"+$fileInput.attr("name")+"'/>");
$fileInput.replaceWith($fileCopy);

Answer 19

---

$("input[type=file]").wrap("<div id='fileWrapper'/>");
$("#fileWrapper").append("<div id='duplicateFile'   style='display:none'>"+$("#fileWrapper").html()+"</div>");
$("#fileWrapper").html($("#duplicateFile").html());

Comments

हाय नीरज। स्वागत हे। यह उत्तर अच्छी तरह से सही हो सकता है लेकिन यह कुछ स्पष्टीकरण का उपयोग कर सकता है।

— टॉमफैनिंग

Answer 20

यह क्रोम, एफएफ और सफारी के साथ काम करता है

$("#control").val("")

IE या ओपेरा के साथ काम नहीं कर सकता

Comments

ओपी में बहुत ही समस्या के लिए लगभग समान दिखता है

— ट्रिंडाज़

एक मानक प्रारूप नहीं है, इनपुट प्रकार फ़ाइल का मूल्य सुरक्षा कारणों से एक संरक्षित संपत्ति है।

— ई-जानकारी128

Answer 21

बटन के वांछित कार्यों के बाद इसे अतुल्यकालिक बनाएं और इसे रीसेट करें।

    <!-- Html Markup --->
    <input id="btn" type="file" value="Button" onchange="function()" />

    <script>
    //Function
    function function(e) {

        //input your coding here           

        //Reset
        var controlInput = $("#btn");
        controlInput.replaceWith(controlInput = controlInput.val('').clone(true));
    } 
    </script>

Answer 22

function clear() {
    var input = document.createElement("input");
    input.setAttribute('type', 'file');
    input.setAttribute('value', '');
    input.setAttribute('id', 'email_attach');

    $('#email_attach').replaceWith( input.cloneNode() );
}

Answer 23

यह मेरे लिए काम नहीं करता है:

$('#Attachment').replaceWith($(this).clone());
or 
$('#Attachment').replaceWith($('#Attachment').clone());

इसलिए asp mvc में मैं फ़ाइल इनपुट को बदलने के लिए रेजर सुविधाओं का उपयोग करता हूं। पहले आईडी और नाम के साथ इनपुट स्ट्रिंग के लिए एक वैरिएबल बनाएं और फिर इसे पेज में दिखाने और रीसेट बटन पर क्लिक करने के लिए उपयोग करें:

@{
    var attachmentInput = Html.TextBoxFor(c => c.Attachment, new { type = "file" });
}

@attachmentInput

<button type="button" onclick="$('#@(Html.IdFor(p => p.Attachment))').replaceWith('@(attachmentInput)');">--</button>

Answer 24

एक आसान तरीका इनपुट प्रकार को बदल रहा है और इसे फिर से वापस बदल सकता है।

कुछ इस तरह:

var input = $('#attachments');
input.prop('type', 'text');
input.prop('type', 'file')

Answer 25

आप इसे इसके क्लोन के साथ बदल सकते हैं

var clone = $('#control').clone();

$('#control').replacewith(clone);

लेकिन यह क्लोन इसके मूल्य के साथ भी है ताकि आप इसे पसंद करें

var emtyValue = $('#control').val('');
var clone = emptyValue.clone();

$('#control').replacewith(clone);

Answer 26

यह आसान है (ओपेरा को छोड़कर सभी ब्राउज़रों में काम करता है):

$('input[type=file]').each(function(){
    $(this).after($(this).clone(true)).remove();
});

जेएस फिडल: http://jsfiddle.net/cw84x/1/

Comments

मैं ओपेरा के बारे में कम परवाह नहीं करता। बस इसे रूप में लपेटें यदि आप परवाह करते हैं। मुझे व्यक्तिगत रूप से परवाह नहीं है और मैं अपनी पद्धति का उपयोग करूंगा।

— अनाम

यह बिल्कुल अच्छा जवाब नहीं है, लेकिन मुख्य समस्या वास्तव में खराब रवैया था

— सैम पी

Answer 27

क्या? अपने सत्यापन समारोह में, बस डाल दिया

document.onlyform.upload.value="";

अपलोड मान है नाम है:

<input type="file" name="upload" id="csv_doc"/>

मैं JSP का उपयोग कर रहा हूँ, निश्चित नहीं है कि क्या फर्क पड़ता है ...

मेरे लिए काम करता है, और मुझे लगता है कि यह आसान है।