Question

请检查以下代码

HTML

<!-- bootstrap-progressbar -->
<link href="vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

<!-- Custom Theme Style -->
<link href="build/css/custom.min.css" rel="stylesheet">
<!-- Custom Responsive Style -->
<link href="build/css/responsive.css" rel="stylesheet">

<!--Sweet alerts style-->
<link rel="stylesheet" type="text/css" href="css/sweetalert/sweetalert.css">

<!--Sweet alerts javascript-->
<script src="js/sweetalert/sweetalert.min.js"></script>

<form action="">
            <div class="col-md-12 col-sm-12 col-xs-12">
              <div class="x_panel tile fixed_height_320">
                    <div class="col-sm-12 formset2 msgbox1">
                        <div class="row">
                            <div class="form-group">
                                <h5>Title</h5>
                                <input type="text" class="form-control" id="titleText" name="titleText" value="" placeholder="i.e LOREM IPSUM">
                            </div>
                        </div>
                        <div class="row pt48">
                            <div class="col-xs-12 col-md-12 col-sm-12 formbox">
                                <div class="form-group">
                                <h5>Text</h5>
                                <textarea class="form-control vresize" rows="5" id="message" name="message"></textarea>
                                </div>
                                <div class="form-group">
                                <img id="blah" src="#" alt="your image" />
                                </div>
                                <div class="form-group text-right"><span id="videoOutput"></span><span id="imageOutput"></span>
                                    <span class="btn btn-default btn-file editacc btnspt hand">ADD VIDEO <input type="file" id="videoURL" name="videoURL"></span><span class="btn btn-default btn-file editacc btnspt hand">ADD IMAGE <input type="file" id="imageURL" name="imageURL"></span>  

                                </div>
                            </div>
                        </div>
                        <div id="education_fields">

                        </div>
                        <div class="row text-right pt24"><span class="btn btn-primary bluebt hand" onclick="education_fields();"><span class="glyphicon glyphicon-plus" style="padding-top:5px;"></span> ADD NEW MESSAGE</span></div> 
                    </div>       
              </div>
            </div>
        </form>

JQuery的

<script type="text/javascript">
        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]);
    }
}

$("#imageURL").change(function(){
    readURL(this);
    alert("sdsds");
});
    </script>

这里应该发生的是，当用户点击“添加图片”按钮时，应该打开文件选择器。用户将选择一个图像。所选图像将在网页中预览。但目前“预览”部分尚未发生。这有什么不对？

Answer 1

您的代码运行正常，您只需在代码中添加jquery，如

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

以下工作代码段

＆＃13;

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]);
  }
}

$("#imageURL").change(function() {
  readURL(this);
  alert("sdsds");
});

＆＃13;

#blah{width:200px;height:200px}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form action="">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel tile fixed_height_320">
      <div class="col-sm-12 formset2 msgbox1">
        <div class="row">
          <div class="form-group">
            <h5>Title</h5>
            <input type="text" class="form-control" id="titleText" name="titleText" value="" placeholder="i.e LOREM IPSUM">
          </div>
        </div>
        <div class="row pt48">
          <div class="col-xs-12 col-md-12 col-sm-12 formbox">
            <div class="form-group">
              <h5>Text</h5>
              <textarea class="form-control vresize" rows="5" id="message" name="message"></textarea>
            </div>
            <div class="form-group">
              <img id="blah" src="#" alt="your image" />
            </div>
            <div class="form-group text-right"><span id="videoOutput"></span><span id="imageOutput"></span>
              <span class="btn btn-default btn-file editacc btnspt hand">ADD VIDEO <input type="file" id="videoURL" name="videoURL"></span><span class="btn btn-default btn-file editacc btnspt hand">ADD IMAGE <input type="file" id="imageURL" name="imageURL"></span>

            </div>
          </div>
        </div>
        <div id="education_fields">

        </div>
        <div class="row text-right pt24"><span class="btn btn-primary bluebt hand" onclick="education_fields();"><span class="glyphicon glyphicon-plus" style="padding-top:5px;"></span> ADD NEW MESSAGE</span>
        </div>
      </div>
    </div>
  </div>
</form>

＆＃13;

无法在JQuery中预览图像

1 个答案: