This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.
This code example breaks the layout, though I don't know whats the reason for this: <!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> <script type="text/javascript"> oFReader = new FileReader(), rFilter = 'image/jpg'; oFReader.onload = function (oFREvent) { document.getElementById("uploadPreview").src = oFREvent.target.result; }; function loadImageFile() { if (document.getElementById("uploadImage").files.length === 0) { return; } var oFile = document.getElementById("uploadImage").files[0]; if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } oFReader.readAsDataURL(oFile); } </script> </head> <body onload="loadImageFile();"> <form name="uploadForm"> <table> <tbody> <tr> <td><img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" /></td> <td><input id="uploadImage" type="file" name="myPhoto" onchange="loadImageFile();" /></td> </tr> </tbody> </table> <p><input type="submit" value="Send" /></p> </form> </body> </html>
It sucks, but the code example fields don't get escaped automatically, so some of the HTML is being interpreted. For the display code, try escaping the angle brackets, for example with HTML entity references.
replacing all html entities helps, but this could be automated
Agreed. I've got it on my feedback list for this weekend, and will raise it as a task to be done.
*** Bug 20936 has been marked as a duplicate of this bug. ***