0

我对我的html代码有点困惑。我想要的是，当用户单击圆形图像时，它会调用加载/拍照，然后将图片分配给圆形。在我下面的代码中，它只调用了拍照功能，没有调用 on change 功能（pictureselected）。

当它直接通过“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>
4

1 回答 1

0

您正在尝试调用将在更改事件上触发的函数。将您的事件更改为“onclick”，然后您的代码将按预期执行。

检查以下代码更改，

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

onclick="pictureSelected()"

于 2017-08-03T10:38:37.997 回答