Closed a631807682 closed 5 years ago
I use webshim to preview image in IE9 ,i hide a DOM and then show it , but change event not trigger and mousedown/mouseup event work fine . here is my code :
<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script src="bower_components/webshim-1.16.0/js-webshim/minified/polyfiller.js"></script> <title>Image preview example</title> </head> <style type="text/css"> .hide { display: none; } .show { display: block; } </style> <body> <!-- add ws-filereader class to all shimable type="file" inputs --> <div> <input type="file" class="ws-filereader" id="user-photo" multiple="" accept="image/*" /> </div> <img src="" id="preview" style="width: 100px;height:100px"> <div class="hide" id='j-upload'> <button id='btnClose'>X</button> <div id="sec"> <input type="file" class="ws-filereader" id="user-photo-1" multiple="" accept="image/*" /> </div> <img src="" id="preview-1" style="width: 100px;height:100px"> </div> <button id='btnDisplay'>show</button> </body> </html> <script type="text/javascript"> //load the filereader webshim.polyfill('filereader'); //on DOM ready filereader is shimmed $(function() { $('#user-photo').on('change', function(evt) { console.log('change 0 ') var reader, file; reader = new FileReader(); reader.onload = function(evt) { var fileData = evt.target.result; $('#preview').attr('src', fileData); // fileData is the base64 encoded image }; file = $(this).prop('files')[0]; reader.readAsDataURL(file); $('#j-upload').attr('class', 'show'); // $('body').css('overflow', 'none') }); $('#user-photo-1').on('change', function(evt) { console.log('change 1 ') var reader, file; reader = new FileReader(); reader.onload = function(evt) { var fileData = evt.target.result; $('#preview-1').attr('src', fileData); // fileData is the base64 encoded image }; file = $(this).prop('files')[0]; reader.readAsDataURL(file); $('#j-upload').attr('class', 'hide'); //$('#j-upload').hide(); // $('#j-upload').css('visibility', 'hidden'); // $('body').css('overflow', 'auto') }); $('#btnDisplay').click(function() { $('#j-upload').attr('class', 'show'); // $('#j-upload').show(); // $('#j-upload').css('visibility', 'visible'); // $('body').css('overflow', 'none') }) $('#btnClose').click(function() { $('#j-upload').attr('class', 'hide'); // $('#j-upload').css('visibility', 'hidden'); // $('#j-upload').hide(); // $('body').css('overflow', 'auto') }) }); </script>
I use webshim to preview image in IE9 ,i hide a DOM and then show it , but change event not trigger and mousedown/mouseup event work fine . here is my code :