This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 20936 - code example input breaks layout
Summary: code example input breaks layout
Status: RESOLVED DUPLICATE of bug 20935
Alias: None
Product: webplatform.org
Classification: Unclassified
Component: infrastructure (show other bugs)
Version: unspecified
Hardware: All All
: P2 normal
Target Milestone: ---
Assignee: Doug Schepers
QA Contact: public-webplatform-bugs list
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2013-02-09 13:33 UTC by mail
Modified: 2013-02-09 14:27 UTC (History)
1 user (show)

See Also:


Attachments

Description mail 2013-02-09 13:33:31 UTC
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>
Comment 1 David Kirstein (Frozenice) 2013-02-09 14:27:57 UTC

*** This bug has been marked as a duplicate of bug 20935 ***