मैं जावास्क्रिप्ट के साथ HTML फ़ाइल इनपुट कैसे साफ़ कर सकता हूं?

Question

मैं अपने फॉर्म में फाइल इनपुट को क्लियर करना चाहता हूं।

मैं एक ही विधि के लिए स्रोतों को स्थापित करने के बारे में जानता हूं ... लेकिन वह विधि चयनित फ़ाइल पथ को मिटा नहीं देगा।

नोट : मैं पृष्ठ को फिर से लोड करने, फ़ॉर्म को रीसेट करने या AJAX कॉल करने से बचना चाहूंगा।

क्या यह संभव है?

Answer 1

उस नोड को निकालने के बारे में कैसे, उसी नाम के साथ एक नया बनाना?

Comments

आपका क्या मतलब है, कृपया मुझे एक उदाहरण दें।

आप अपने हैंडलर खो देंगे, जैसे यह: var inputPhoto = document.getElementById ('photoInputB); inputPhoto.addEventListener ('परिवर्तन', हैंडलर_फाइल, गलत);

— रुई मार्टिन्स

लापता स्पष्टीकरण के लिए वोट दिया गया!

— जेसन

Answer 2

जावास्क्रिप्ट के साथ फ़ाइल इनपुट को साफ़ करने के 3 तरीके हैं:

1. रिक्त या रिक्त मान सेट करें।

   IE11 + और अन्य आधुनिक ब्राउज़रों के लिए काम करता है।

2. एक नया फ़ाइल इनपुट तत्व बनाएं और पुराने को बदल दें।

   नुकसान यह है कि आप घटना श्रोताओं और विस्तारक गुणों को खो देंगे।

3. 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);
        }
    }
}

Comments

क्या हमें बाद में बनाए गए फॉर्म को भी नहीं निकालना चाहिए?

— एंड्री

नहीं, आपको जरूरत नहीं है। प्रपत्र तत्व को पृष्ठ दस्तावेज़ ट्री में जोड़ा नहीं गया है।

— जुएल

यदि आप घटनाओं और अन्य विशेषताओं को संरक्षित करना चाहते हैं, तो एक चेतावनी का एक शब्द, दृष्टिकोण 2 का उपयोग करना। या 3. आपके लिए इसके निहितार्थ हो सकते हैं जो प्रोग्राम में तत्व के साथ जोड़े गए थे। मेरे मामले में, मैंने एक फॉर्म तत्व पर एक ऑनक्लिक ईवेंट जोड़ा, जो फॉर्म रीसेट के बाद गायब हो गया। ऐसे मामले में, दृष्टिकोण 1 बेहतर है। (यह 2 के लिए नोट किया गया था, लेकिन 3. के लिए भी हो सकता है)

— वोल्फी इनु

Answer 3

tl; dr : आधुनिक ब्राउज़रों के लिए, बस उपयोग करें

input.value = '';

---

पुराना उत्तर:

कैसा रहेगा:

input.type = "text";
input.type = "file";

मुझे अभी भी समझना है कि यह वेबकिट के साथ काम क्यों नहीं करता है ।

वैसे भी, यह IE9>, फ़ायरफ़ॉक्स और ओपेरा के साथ काम करता है।
वेबकिट के साथ स्थिति यह है कि मैं इसे फ़ाइल में वापस बदलने में असमर्थ प्रतीत होता हूं।
IE8 के साथ, स्थिति यह है कि यह एक सुरक्षा अपवाद को फेंकता है।

संपादित करें: वेबकिट, ओपेरा और फ़ायरफ़ॉक्स इस काम करता है के लिए, हालांकि:

input.value = '';

(इस प्रस्ताव के साथ उपरोक्त उत्तर की जाँच करें)

मैं देखूंगा कि क्या मुझे जीसी की आवश्यकता के बिना इस क्रॉस-ब्राउज़र को करने का एक अच्छा क्लीनर तरीका मिल सकता है।

EDIT2:

try{
    inputs[i].value = '';
    if(inputs[i].value){
        inputs[i].type = "text";
        inputs[i].type = "file";
    }
}catch(e){}

अधिकांश ब्राउज़रों के साथ काम करता है। IE <9 के साथ काम नहीं करता है, यह सब है।
फ़ायरफ़ॉक्स 20, क्रोम 24, ओपेरा 12, IE7, IE8, IE9 और IE10 पर परीक्षण किया गया।

Answer 4

''सभी ब्राउज़र में काम नहीं करने के लिए मान सेट करना ।

इसके बजाय मान को सेट करने का प्रयास nullकरें:

document.getElementById('your_input_id').value= null;

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

संपादित करें: कृपया ध्यान दें कि NULLखाली स्ट्रिंग पर सेट करते समय सभी ब्राउज़रों पर काम करना बंद नहीं हुआ।

Comments

दुर्भाग्य से मैं इसे नहीं देख रहा हूँ all browsers... यह IE8, IE9 या IE10 में काम नहीं करता है (लेकिन IE11 में काम करता है)।

— freefaller

खैर खतरा है। मैं IE ब्राउज़र के पुराने संस्करणों का परीक्षण नहीं किया। माफ़ करना।

— BigMac66

Answer 5

दुर्भाग्य से उपरोक्त उत्तर में से कोई भी सभी ठिकानों को कवर नहीं करता है - कम से कम वेनिला जावास्क्रिप्ट के साथ मेरे परीक्षण के साथ नहीं।

• .value = nullफायरफॉक्स, चोम, ओपेरा और IE11 पर काम करने के लिए प्रकट होता है (लेकिन IE8 / 9/10 नहीं )

• .cloneNode.clone()फायरफॉक्स पर (और jQuery में) .valueओवर की नकल करने के लिए प्रकट होता है , इसलिए क्लोन को व्यर्थ बना देता है।

तो यहाँ वेनिला जावास्क्रिप्ट फ़ंक्शन है जो मैंने लिखा है कि फ़ायरफ़ॉक्स (27 और 28), क्रोम (33), IE (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"));

Comments

यह उत्तर है। इस सवाल के इतने सारे जवाबों में से एक समस्या - इस पृष्ठ पर ही नहीं, बल्कि अन्य मंचों पर भी, यह है कि आप "3 चयनित फ़ाइलें" पाठ को साफ़ कर सकते हैं, लेकिन यह वास्तव में http फ़ाइलों को साफ़ नहीं करता है कतार। फिर क्या होता है कि अगली बार जब आप अपलोड करने का प्रयास करते हैं, तो आप केवल एक फ़ाइल का चयन कर सकते हैं, और इससे भी बदतर, यह पिछले फ़ाइल फ़ोल्डर में सहेजा जाता है। यह उत्तर दोनों को स्पष्ट कर देगा, और आप फ़ाइलों के अगले सेट को अपलोड करना फिर से शुरू कर सकते हैं जितनी आसानी से आपने फ़ाइलों का पहला सेट अपलोड किया है।

— तारकुस

क्या ifकथन को catchब्लॉक के अंदर नहीं रखा जाना चाहिए ?

— फहमी

@Fahmi - नहीं, ऐसा नहीं होना चाहिए

— freefaller

ओह, मैंने सोचा था कि IE8 / 9/10 मूल्य को सेट करने की कोशिश करते समय एक अपवाद को फेंक देगा null। फिर ctrl.value = null;एक try...catchब्लॉक के अंदर डालने की बात क्या है ? नए प्रश्न के लिए क्षमा करें।

— फहमी

ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);- वास्तव में हम किस मूल्य पर मूल्य को स्पष्ट करते हैं, क्योंकि cloneNodeयह भी इसे कॉपी करता है?

— फहमी

Answer 6

उपाय

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

var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

डेमो

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

लिंक

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

• जावास्क्रिप्ट के साथ फ़ाइल इनपुट कैसे रीसेट करें

Answer 7

U को नए फ़ाइल इनपुट के साथ बदलने की आवश्यकता है। यहाँ है कि यह jQuery के साथ कैसे किया जा सकता है:

var inputFile = $('input[type=field]');
inputFile.wrap('<div />');

और जब आप इनपुट फ़ील्ड (उदाहरण के लिए किसी घटना पर) को साफ़ करने की आवश्यकता हो तो इस लाइन का उपयोग करें:

inputFile.parent().html( inputFile.parent().html() );

Comments

मूल तत्व को बदलने के लिए, यह बेहतर दिखता है: stackoverflow.com/questions/1043957/…

— मेंगड़ी गाओ

Answer 8

document.getElementById('your_input_id').value=''

संपादित करें:
यह IE और ओपेरा में काम नहीं करता है, लेकिन फ़ायरफ़ॉक्स, सफारी और क्रोम के लिए काम करता है।

Comments

यह मेरे लिए काम करता है, हालांकि मैं हमेशा खुद से पूछता हूं कि कब तक।

— पेक्का

यह अभ्यस्त काम, बस कुछ ब्राउज़रों में, और फ़ाइल इनपुट के मूल्य को सेट करना एक सुरक्षा उल्लंघन है ... अच्छा विकल्प नहीं।

Answer 9

मुझे भी यही समस्या हो रही थी और मैं इसे लेकर आया था।

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>

Answer 10

यह वास्तव में काफी आसान है।

document.querySelector('#input-field').value = '';

Answer 11

मैं 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>

Comments

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

— क्लिंटन डॉब्स

Answer 12

उपरोक्त उत्तर निम्नलिखित कारणों के लिए कुछ अनाड़ी समाधान प्रस्तुत करते हैं:

1. मैं करने के लिए होने की तरह नहीं है और फिर एचटीएमएल हो रही है, यह बहुत शामिल और गंदा है।wrapinput

2. क्रॉस ब्राउज़र JS आसान है और ऐसा लगता है कि इस मामले में typeस्विच करने के लिए मज़बूती से उपयोग करने के लिए बहुत सारे अज्ञात हैं (जो, फिर से, थोड़ा गंदा है) और करने के valueलिए सेटिंग''

इसलिए मैं आपको अपना jQuery आधारित समाधान प्रदान करता हूं:

$('#myinput').replaceWith($('#myinput').clone())

यह वही करता है जो यह कहता है, यह इनपुट को स्वयं के क्लोन के साथ बदल देता है। क्लोन में फ़ाइल चयनित नहीं होगी।

लाभ:

1. सरल और समझने योग्य कोड
2. कोई अनाड़ी रैपिंग या स्विचिंग टाइप नहीं
3. ब्राउज़र संगतता क्रॉस करें (यदि मैं यहां गलत हूं तो मुझे सुधारें)

परिणाम: हैप्पी प्रोग्रामर

Comments

Cross browser compatibility... मेरे परीक्षण से पता चलता है कि फ़ायरफ़ॉक्स के .valueहिस्से के रूप में कॉपी करता है .clone(), इसलिए इसे बेकार प्रदान करता है

— फ्रीफ़र

@freefaller कॉल करने से पहले मूल्य क्यों नहीं बदलते replaceWith? मैं clone()अपने आप का उपयोग कर रहा हूं और यह फ़ायरफ़ॉक्स में ठीक काम कर रहा है (मुझे नहीं पता कि यह अभी भी आपके लिए एक साल बाद मामला है =))

— एब्डो

@ अब्दो - अगर आप मेरे जवाब को देखेंगे तो आप देखेंगे कि मैं करता हूँ

— फ़्रीफ़्लोर

सवाल jQuery के बारे में नहीं पूछ रहा है; यह जावास्क्रिप्ट के बारे में पूछ रहा है।

— अरेले

Answer 13

यहाँ मेरे दो सेंट हैं, इनपुट फ़ाइलों को सरणी के रूप में संग्रहीत किया जाता है, इसलिए यहां इसे कैसे शून्य करना है

document.getElementById('selector').value = []

यह एक खाली सरणी देता है और सभी ब्राउज़रों पर काम करता है

Answer 14

मुझे क्या मदद मिली, मैंने कतार से बाहर निकलने के बजाय एक लूप का उपयोग करके अंतिम चयनित फ़ाइल को लाने और अपलोड करने की कोशिश की, और यह काम कर गया। यहाँ कोड है।

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);
}

आशा है कि यह कुछ मदद कर सकता है।

Answer 15

मैंने अधिकांश समाधानों की कोशिश की लेकिन किसी के काम नहीं आया। हालाँकि मुझे इसके लिए नीचे एक चक्कर लगा पाया।

प्रपत्र की संरचना है: form=> label, inputऔरsubmit button । जब हम एक फ़ाइल चुनते हैं, तो फ़ाइलनाम लेबल द्वारा मैन्युअल रूप से जावास्क्रिप्ट में ऐसा करके दिखाया जाएगा।

इसलिए मेरी रणनीति यह है: शुरू में सबमिट buttonको अक्षम कर दिया जाए, एक फ़ाइल चुने जाने के बाद, सबमिट बटन disabledविशेषता को हटा दिया जाएगा, जैसे कि मैं फ़ाइल सबमिट कर सकता हूं। सबमिट करने के बाद, मैं स्पष्ट करता हूं labelकि इससे ऐसा लगता है जैसे मैंने फाइल को साफ कर दिया हैinput लेकिन वास्तव में ऐसा नहीं है। फिर मैं फ़ॉर्म सबमिट करने से रोकने के लिए सबमिट बटन को फिर से अक्षम कर दूंगा।

सबमिट button disableया नहीं सेट करके , मैं फ़ाइल को कई बार सबमिट करने से रोकता हूं जब तक कि मैं दूसरी फ़ाइल नहीं चुनता।

Answer 16

मैं 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");
}