0
私はちょっと私のHTMLコードで混乱しています。 私はちょうど、円のイメージをクリックすると、ロード/写真を呼び出して、サークルに画像を割り当てます。 私の下のコードでは、それは写真撮影機能を呼び出すだけで、変更機能（写真選択）は呼び出されていません。javascript onchange関数を呼び出すことができませんでした
"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>