javascript onchange function could not be called

Question

I'm just little bit confused on my html code. What I want just, when user click the circle image, it will call load / take picture and then assign the picture to the circle. In my below code, it's only call the take picture function, the on change function (pictureselected) is not being called.

When it calls directly through "srcimagefile", all function are called correctly. Please see my below code. Please advise, what did I miss ?

<html>

<head>

</head>

<body>
<form>
  <div class="col-md-12 col-xs-12" align="center">    
    <div class="outter">
        <input type="image" id="imagefile" src="http://lorempixel.com/output/people-q-c-100-100-1.jpg" class="image-circle" onclick="takePicture()"/>
        <input type="file" id="srcimagefile" onchange="pictureSelected()" />
    </div>
  </div>      
  <div class="group">
    <input type="text"><span class="highlight"></span><span class="bar"></span>
    <label>Username</label>
  </div>
  <div class="group">
    <input type="password"><span class="highlight"></span><span class="bar"></span>
    <label>Password</label>
  </div>
  <button type="button" class="button buttonBlue">Login
    <div class="ripples buttonRipples"><span class="ripplesCircle"></span></div>
  </button>
</form>

<link href="userlogincss.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="userloginjs.js"></script>
<script>

    function takePicture() {
       $("#srcimagefile").click();     
    }

    function pictureSelected() {
        fileSelectHandler();        
    }

    // Create variables (in this scope) to hold the Jcrop API and image size
    var jcrop_api, boundx, boundy;
    function fileSelectHandler() {
        // get selected file
        var oFile = $('#srcimagefile')[0].files[0];     
        alert('Hello');
        // hide all errors
        $('.error').hide();
        // check for image type (jpg and png are allowed)
        var rFilter = /^(image\/jpeg|image\/png)$/i;
        if (! rFilter.test(oFile.type)) {
        $('.error').html('Please select a valid image file (jpg and png are allowed)').show();
            return;     
        }

        // check for file size
        if (oFile.size > 250 * 1024) {
        $('.error').html('You have selected too big file, please select a one smaller image file').show();
        return;
        }

        // preview element
        var oImage = document.getElementById('imagefile');

        var oReader = new FileReader();
        oReader.onload = function(e) {
        // e.target.result contains the DataURL which we can use as a source of the image
            oImage.src = e.target.result;
        }

        // read selected file as DataURL
        oReader.readAsDataURL(oFile);

    }

</script>


</body>

<html>

score 0 · Answer 1 · answered Aug 03 '17 at 10:38

You are trying to call the function which will trigger on Change Event. Change your event to "onclick", then your code will execute as expected.

Check the below code change,

<input type="file" id="srcimagefile" onclick="pictureSelected()"

onclick="pictureSelected()"

javascript onchange function could not be called

1 Answers1