Javascript onchange Funktion konnte nicht

Ich bin nur ein bisschen verwirrt auf meinem HTML-Code aufgerufen. Was ich will nur, wenn Benutzer klicken Sie auf das Bild Kreis, es wird laden/nehmen Bild und dann das Bild dem Kreis zuweisen. In meinem unteren Code, es ist nur Aufruf der Take-Bild-Funktion, die On-Change-Funktion (pictureelected) wird nicht aufgerufen.Javascript onchange Funktion konnte nicht

Wenn es direkt über "srcimagefile" aufruft, werden alle Funktionen korrekt aufgerufen. Bitte beachten Sie meinen untenstehenden Code. Bitte beraten, was habe ich vermisst?

<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>

Quelle

2017-04-20 Zainal Arifin

Sie versuchen, die Funktion aufzurufen, die bei Change Event ausgelöst wird. Ändern Sie Ihr Ereignis in "onclick", dann wird der Code wie erwartet ausgeführt.

Überprüfen Sie den folgenden Code ändern,

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

Onclick = "PictureSelected()"

Quelle

2017-08-03 10:38:37 Basith

Javascript onchange Funktion konnte nicht

Antwort

Verwandte Themen