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函數不能被調用

回答

相關問題