从html表单中选择后显示图像

时间:2016-04-01 12:40:18

标签: javascript jquery html twitter-bootstrap

我想按照以下代码从html表单中选择后显示图片: http://jsfiddle.net/LvsYc/

我的代码是:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="bootstrap/favicon.ico">

  <title>Image Test</title>
  <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="bootstrap/jquery.min.js"></script>
  <link href="bootstrap/signin.css" rel="stylesheet">
  <script>
    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
          $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
      }
    }

    $("#imgInp").change(function() {
      readURL(this);
    });
  </script>
</head>

<body>
  <div class="container">
    <form id="form12" runat="server">
      <input type='file' id="imgInp" />
      <img id="blah" src="#" alt="your image" />
    </form>

    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>

</html>

但未显示所选图像。我究竟做错了什么?它看起来几乎就像上面的例子。

0 个答案:

没有答案