JavaScript onchange函数不能被调用

我只是有点困惑我的HTML代码。我只想要什么，当用户点击圆形图像时，它会调用加载/拍摄图片，然后将图片分配给圆圈。在我的下面的代码中，它只调用拍照功能，on change函数（pictureselected）没有被调用。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>

来源

2017-04-20 Zainal Arifin

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

检查下面的代码改变，

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

的onclick = “pictureSelected（）”

来源

2017-08-03 10:38:37 Basith

JavaScript onchange函数不能被调用

回答

相关问题