CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
PeakGen
PeakGen

Reputation: 23025

Unable to preview an image in JQuery

Please check the below code

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>

What should happen here is, when user clicks on "Add Image" button, a file chooser should open. User will select an image. The selected image will be previewed in the web page. But at the moment the "Preview" part is not taking place. What is wrong here?

Upvotes: 1

Views: 89

Answers (1)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Your code is working fine, you just need to add jquery in your Code like

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

Below working snippet

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");
});
#blah{width:200px;height:200px}
<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>

Upvotes: 1

Related Questions