फ़ाइल अपलोड रद्द होने पर एक छवि पूर्वावलोकन को हटा रहा है

मैं इसे अपलोड करने से पहले एक छवि का पूर्वावलोकन करने की कोशिश कर रहा हूं। उस अंत में, मेरे पास एक तस्वीर है जब कोई उपयोगकर्ता चित्र अपलोड करता है।

पूर्वावलोकन की गई छवि पर क्लिक करके, उपयोगकर्ता अपलोड को रद्द करने में सक्षम है, और पूर्वावलोकन की गई छवि गायब हो जाएगी। हालांकि, यदि उपयोगकर्ता पहले से ही एक छवि का चयन कर चुका है, और फिर चयन करते समय ' रद्द करें ' पर क्लिक करें अपलोड करने के लिए एक फ़ाइल (क्योंकि उसने अपना दिमाग बदल दिया है), जो छवि पहले चुनी गई थी वह अभी भी रहेगी, और गायब नहीं होगी।

क्या इस मामले में पूर्वावलोकन की गई छवि को हटाने के लिए वैसे भी है?

HTML:

<input type='file' id='input1'>

jQuery:

$(document).ready(function(){

    function readURL(input) {        
        if (input.files && input.files[0]) {
            var reader = new FileReader();        
            reader.onload = function (e) {
                $('#imagepreview1').prop('src', e.target.result).show();
            }        
            reader.readAsDataURL(input.files[0]);
        }
    }

    $("#input1").change(function() {
        readURL(this);
        $('#imagepreview1').show();
    });

    $('#imagepreview1').click(function(){        
        $('#input1').replaceWith($('#input1').clone(true));
        $('#imagepreview1').hide();        
    });

});
1
jsfiddle.net/LCrE4 <- यदि आवश्यक हो तो JSFiddle लिंक
जोड़ा लेखक Kenneth .J, स्रोत
@UDB नहीं। मेरा मतलब था कि अगर मैंने "फ़ाइल चुनें" पर क्लिक किया और अपलोड के लिए एक फ़ाइल का चयन किया, तो तस्वीर # imagepreview1 'में दिखाई देगी। फिर, यदि मैं फिर से "फ़ाइल चुनें" पर क्लिक करता हूं और जब पॉप अप मेरे लिए फ़ाइल का चयन करने के लिए प्रकट होता है, और मैं रद्द करता हूं, तो पहले चयनित छवि के लिए छवि पूर्वावलोकन अभी भी अपलोड किया गया है, भले ही अपलोड रद्द कर दिया गया हो। छवि पूर्वावलोकन क्यों गायब नहीं होता है?
जोड़ा लेखक Kenneth .J, स्रोत
jsfiddle.net/74vyw यह वही है जो आप चाहते हैं
जोड़ा लेखक UDB, स्रोत

2 उत्तर

हर बार जब आप क्लिक करते हैं तो छवि के src को हटाएं,

$("#input1").click(function() {    
    $('#imagepreview1').attr('src','');
});

डेमो

1
जोड़ा
एचटीएमएल 5 सत्यापन के लिए स्रोत विशेषता को छोड़कर (और खाली नहीं किया जा सकता है) को छोड़कर।
जोड़ा लेखक isherwood, स्रोत

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

http://jsfiddle.net/isherwood/LCrE4/3

$('#imagepreview1').prop('src', e.target.result).show().addClass('selected');

...

var orig_src = $('#imagepreview1').prop('src');

$('#imagepreview1').click(function() {    
    $('#input1').replaceWith($('#input1').clone(true));
    $('#imagepreview1').not('.selected').hide();
    $('#imagepreview1.selected').prop('src', orig_src).removeClass('selected');
});
0
जोड़ा