उसी फ़ाइल के लिए इनपुट प्रकार = फ़ाइल "परिवर्तन" का पता कैसे लगाएं?

Question

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

लेकिन मैं इस घटना को आग देना चाहता हूं अगर उपयोगकर्ता फिर से उसी फ़ाइल का चयन करता है।

1. उपयोगकर्ता का चयन फ़ाइल A.jpg(घटना आग)
2. उपयोगकर्ता का चयन फ़ाइल B.jpg(घटना आग)
3. उपयोगकर्ता का चयन फ़ाइल B.jpg(घटना आग नहीं है, मैं इसे आग करना चाहता हूँ)

मैं यह कैसे कर सकता हूं?

Answer 1

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

JsFiddle पर उदाहरण।

या आप बस का उपयोग कर सकते हैं .prop("value", ""), इस उदाहरण को jsFiddle पर देखें ।

• jQuery 1.6+ prop
• पहले के संस्करण attr

Comments

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

— ब्रूनोएलएम

ध्यान रखें कि जब आप का उपयोग हो सकता है .attr("value", "")या .val("")(नीचे @ वैगनर-leonardi ने सुझाव दिया की तरह) इंटरनेट एक्सप्लोरर परिवर्तन घटना आग, जबकि क्रोम नहीं करना होगा

— fadomire

चूंकि "मान" एक संपत्ति है और इनपुट का गुण नहीं है, इसलिए अनुशंसित jQuery का उपयोग होगा.prop("value", "")

— रोजर बैरेटो

Answer 2

यदि आपने कोशिश की है .attr("value", "")और काम नहीं किया है, तो घबराओ मत (जैसे मैंने किया था)

.val("")इसके बजाय बस करो , और ठीक काम करेगा

Answer 3

आप बस नियंत्रण पर हर बार उपयोगकर्ता द्वारा क्लिक किए जाने पर फ़ाइल पथ को शून्य करने के लिए सेट कर सकते हैं । अब, भले ही उपयोगकर्ता एक ही फ़ाइल का चयन करता है, फिर भी ऑनकॉन्ग इवेंट चालू हो जाएगा।

<input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="*/*" />

Comments

मुझे इस तरह से एक समाधान की आवश्यकता थी। यह वास्तव में कम है और काम हो जाता है। अच्छी सोच Mariusz Wiazowski।

— जय धर्मेंद्र सोलंकी

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

— गीतगेब १३'१

कूल, रास्ता हटाने और डोम में फिर से जोड़ने से बेहतर, thx

— डेविड दाल Busco

Answer 4

प्रत्येक बार उपयोगकर्ता द्वारा फ़ील्ड पर क्लिक किए जाने पर, लक्ष्य इनपुट के मूल्य को साफ़ करने के लिए onClick घटना का उपयोग करें। यह सुनिश्चित करता है कि ऑनकेंज इवेंट को उसी फ़ाइल के लिए ट्रिगर किया जाएगा। मेरे लिए काम किया :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

टाइपस्क्रिप्ट का उपयोग करना

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Answer 5

मुझे यह फाइल इनपुट वैल्यू onClick को क्लियर करके और फिर फाइल को onChange पर पोस्ट करने के लिए मिला। यह उपयोगकर्ता को एक पंक्ति में दो बार एक ही फ़ाइल का चयन करने की अनुमति देता है और अभी भी सर्वर पर पोस्ट करने के लिए परिवर्तन ईवेंट आग है। मेरा उदाहरण jQuery फॉर्म प्लगइन का उपयोग करता है ।

$('input[type=file]').click(function(){
    $(this).attr("value", "");
})  
$('input[type=file]').change(function(){
    $('#my-form').ajaxSubmit(options);      
})

Comments

onClickपहले आग onChange, इसलिए यह विधि मेरे लिए बहुत अच्छा काम करती है।

— iplus26

Answer 6

यह काम मेरे लिए

<input type="file" onchange="function();this.value=null;return false;">

Comments

मुझे लगता है कि आप फ़ंक्शन () {this.value = null; विवरण झूठा है; }

— जसेक पीटल

Answer 7

VueJs समाधान

<input
                type="file"
                style="display: none;"
                ref="fileInput"
                accept="*"
                @change="onFilePicked"
                @click="$refs.fileInput.value=null"
>

Comments

इस भिन्नता उत्तर के लिए धन्यवाद

— कोइज़ॉक्स

Answer 8

@Braitsch से प्रेरणा लेकर मैंने अपने AngularJS2 में निम्नलिखित का उपयोग किया है input-file-component

<input id="file" onclick="onClick($event) onchange="onChange($event)" type="file" accept="*/*" />

export class InputFile {

    @Input()
    file:File|Blob;

    @Output()
    fileChange = new EventEmitter();

    onClick(event) {
        event.target.value=''
    }
    onChange(e){
        let files  = e.target.files;
        if(files.length){
            this.file = files[0];
        }
        else { this.file = null}
        this.fileChange.emit(this.file);
    }
}

यहाँ onClick(event)मुझे बचाया :-)

Answer 9

संभवतः सबसे आसान चीज जो आप कर सकते हैं वह है मूल्य को एक स्ट्रिंग पर सेट करना। यह हर बार फ़ाइल को 'बदलने' के लिए बाध्य करता है, भले ही उसी फ़ाइल को फिर से चुना गया हो।

<input type="file" value="" />

Answer 10

यहाँ रिएक्ट-वाई तरीका समाधान है जो मैंने पाया है कि मेरे लिए काम किया है:

onClick={event => event.target.value = null}

Answer 11

यदि आप jQuery का उपयोग नहीं करना चाहते हैं

<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

यह फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन क्रोम के लिए आपको this.value=null;अलर्ट के बाद जोड़ना होगा ।

Answer 12

डिफ़ॉल्ट रूप से, इनपुट तत्व की मूल्य संपत्ति फाइलों के चयन के बाद साफ हो जाती है यदि इनपुट में कई गुण होते हैं। यदि आप इस संपत्ति को साफ नहीं करते हैं, तो "परिवर्तन" घटना को निकाल नहीं दिया जाएगा यदि आप उसी फ़ाइल का चयन करते हैं। आप multipleविशेषता का उपयोग करके इस व्यवहार का प्रबंधन कर सकते हैं ।

<!-- will be cleared -->
<input type="file" onchange="yourFunction()" multiple/>
<!-- won't be cleared -->
<input type="file" onchange="yourFunction()"/>

संदर्भ

Answer 13

आप changeयहां आग नहीं लगा सकते (सही व्यवहार, क्योंकि कुछ भी नहीं बदला है)। हालाँकि, आप इसे भी बाँध सकते हैं click... हालाँकि यह बहुत बार आग लग सकती है ... हालांकि दोनों के बीच बहुत मध्य मैदान नहीं है।

$("#fileID").bind("click change", function() {
  //do stuff
});

Comments

ऐसा लगता है कि आप केवल उसके शब्दों को दोहरा रहे हैं और .click()"पुनः चयन पर आग" नहीं है।

— ब्रूनोएलएम

@BrunoLM - नहीं, यह नहीं है ... लेकिन मुझे लगता है कि आप उस हिस्से पर पढ़ते हैं जहां मैं कहता हूं कि आप ऐसा नहीं कर सकते, clickयह उतना ही करीब है जितना इसे मिलता है।

— निक Craver

Answer 14

इनपुट के लिए क्लिक इवेंट और चेंज ईवेंट बनाएं। क्लिक ईवेंट इनपुट को खाली कर देता है और परिवर्तन ईवेंट में वह कोड होता है जिसे आप निष्पादित करना चाहते हैं।

तो जब आप इनपुट बटन पर क्लिक करेंगे (तब सेलेक्ट फाइल विंडो खुलने से पहले) पर क्लिक करने पर ईवेंट खाली हो जाएगा, जब आप किसी फाइल का चयन करते हैं तो परिवर्तन ईवेंट हमेशा चालू रहेगा।

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

$("#input").change(function() {
  //Your code you want to execute!
});

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

Answer 15

आप form.reset()फ़ाइल इनपुट की filesसूची को साफ़ करने के लिए उपयोग कर सकते हैं । यह सभी फ़ील्ड को डिफ़ॉल्ट मानों पर रीसेट कर देगा, लेकिन कई मामलों में आप वैसे भी फ़ाइल अपलोड करने के लिए केवल इनपुट प्रकार = 'फ़ाइल' का उपयोग कर सकते हैं। इस समाधान में तत्व को क्लोन करने और फिर से हुक घटनाओं को फिर से करने की आवश्यकता नहीं है।

दार्शनिक के लिए धन्यवाद

Answer 16

मैं उसी मुद्दे पर भाग गया, मैं ऊपर दिए गए समाधानों के माध्यम से लाल हो गया लेकिन उन्हें कोई भी अच्छा स्पष्टीकरण नहीं मिला कि वास्तव में क्या हो रहा था।

यह समाधान मैंने https://jsfiddle.net/r2wjp6u8/ लिखा है, DOM ट्री में कई बदलाव नहीं हैं, यह सिर्फ इनपुट फील्ड के मूल्यों को बदलता है। प्रदर्शन के पहलू से यह थोड़ा बेहतर होना चाहिए।

कड़ी से कड़ी: https://jsfiddle.net/r2wjp6u8/

<button id="btnSelectFile">Upload</button>

<!-- Not displaying the Inputfield because the design changes on each browser -->
<input type="file" id="fileInput" style="display: none;">
<p>
  Current File: <span id="currentFile"></span>
</p>
<hr>
<div class="log"></div>


<script>
// Get Logging Element
var log = document.querySelector('.log');

// Load the file input element.
var inputElement = document.getElementById('fileInput');
inputElement.addEventListener('change', currentFile);

// Add Click behavior to button
document.getElementById('btnSelectFile').addEventListener('click', selectFile);

function selectFile() {
  if (inputElement.files[0]) {
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    // Reset the Input Field
    log.innerHTML += '<p>Removing file: ' + inputElement.files[0].name + '</p>'
    inputElement.value = '';
    // Check how manyf iles are selected and display filename
    log.innerHTML += '<p>Total files: ' + inputElement.files.length + '</p>'
    log.innerHTML += '<hr>'
  }

  // Once we have a clean slide, open fiel select dialog.
  inputElement.click();
};

function currentFile() {
    // If Input Element has a file
  if (inputElement.files[0]) {
    document.getElementById('currentFile').innerHTML = inputElement.files[0].name;
  }
}

</scrip>

Answer 17

इसलिए, 100% का कोई रास्ता नहीं है सुनिश्चित करें कि वे उसी फ़ाइल का चयन कर रहे हैं जब तक कि आप प्रत्येक फ़ाइल को संग्रहीत नहीं करते हैं और उनकी तुलना प्रोग्राम से करते हैं।

जिस तरह से आप फ़ाइलों के साथ इंटरैक्ट करते हैं (जेएस क्या करता है जब उपयोगकर्ता एक फाइल अपलोड करता है) एचटीएमएल 5 फ़ाइल एपीआई और जेएस फाइलरीडर है ।

https://www.html5rocks.com/en/tutorials/file/dndfiles/

https://scotch.io/tutorials/use-the-html5-file-api-to-work-with-files-locally-in-the-browser

ये ट्यूटोरियल आपको दिखाते हैं कि फ़ाइल अपलोड होने पर मेटाडेटा (js ऑब्जेक्ट के रूप में संग्रहीत) को कैसे पढ़ा और पढ़ा जा सकता है।

एक फ़ंक्शन बनाएँ जो 'onChange' को आग देता है जो पढ़ेगा-> स्टोर-> पिछली फ़ाइलों के खिलाफ वर्तमान फ़ाइल के मेटाडेटा की तुलना करें। तब आप अपने ईवेंट को ट्रिगर कर सकते हैं जब वांछित फ़ाइल का चयन किया जाता है।

Answer 18

मेरा विश्वास करो, यह निश्चित रूप से आपकी मदद करेगा!

// there I have called two `onchange event functions` due to some different scenario processing.

<input type="file" class="selectImagesHandlerDialog" 
    name="selectImagesHandlerDialog" 
    onclick="this.value=null;" accept="image/x-png,image/gif,image/jpeg" multiple 
    onchange="delegateMultipleFilesSelectionAndOpen(event); disposeMultipleFilesSelections(this);" />


// delegating multiple files select and open
var delegateMultipleFilesSelectionAndOpen = function (evt) {

  if (!evt.target.files) return;

  var selectedPhotos = evt.target.files;
  // some continuous source

};


// explicitly removing file input value memory cache
var disposeMultipleFilesSelections = function () {
  this.val = null;
};

आशा है कि यह आप में से कई लोगों की मदद करेगा।