Не удалось вызвать функцию обмена javascript

Я просто немного запутался в своем HTML-коде. То, что я хочу просто, когда пользователь нажимает на изображение круга, это вызовет загрузку / снимок, а затем назначит изображение на круг. В приведенном ниже коде это только вызов функции съемки изображения, функция изменения при включении (изображение выбрано) не вызывается.

Когда он вызывает напрямую через "srcimagefile", все функции вызываются правильно. Пожалуйста, смотрите мой код ниже. Посоветуйте, пожалуйста, что я пропустил?

<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>
Источник

1 ответ

Вы пытаетесь вызвать функцию, которая сработает при изменении события. Измените ваше событие на "onclick", тогда ваш код будет выполняться как положено.

Проверьте изменение кода ниже,

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

OnClick="pictureSelected()"

Источник
Другие вопросы по тегам