croppieプラグインがajax/innerHtmlコンテンツを使用して動作しません

私はcroppieプラグインを使用していますが、ajax/php（innerHtmlの結果表示）を使用してコンテンツを上書きすると動作しません。私は何をすべきか？私を助けてください！croppieプラグインがajax/innerHtmlコンテンツを使用して動作しません

croppieについて詳しく読む：data.phpのhttps://foliotek.github.io/Croppie/

内容：PHPとHTMLコードのコンパイル

<?php 
if(isset($_POST['id']) && $_POST['id'] == 1){ 
?> 
<div id="upload-demo" style="width:350px"></div> 
<strong>Select Image:</strong> 
<br/> 
<input type="file" id="upload"> 
<?php 
} 
?>

をマイコード：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="http://demo.itsolutionstuff.com/plugin/croppie.js"></script> 
<link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/croppie.css"> 
</head> 
<body> 

<div id="div1"></div> 

<button>Get External Content</button> 
<script> 
$(document).ready(function(){ 
     $("button").click(function(){ 
      $.ajax({ 
        type: 'get', 
        url: 'php/data.php', 
        data: { 
          id: '1' 
        }, 
        success: function(response) { 
          document.getElementById("div1").innerHTML = response; 
        } 
      }); 
     }); 
}); 

$uploadCrop = $('#upload-demo').croppie({ 
    enableExif: true, 
    viewport: { 
     width: 200, 
     height: 200, 
     type: 'circle' 
    }, 
    boundary: { 
     width: 300, 
     height: 300 
    } 
}); 
$('#upload').on('change', function() { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $uploadCrop.croppie('bind', { 
      url: e.target.result 
     }).then(function(){ 
      console.log('jQuery bind complete'); 
     }); 
    } 
    reader.readAsDataURL(this.files[0]); 
}); 
</script> 
</body> 
</html>

出典

2017-10-29 Hossein Karaji

あなたの問題をします次のコードで解決してください：

<script> 
$(document).ready(function(){ 
     $("button").click(function(){ 
      $.ajax({ 
        type: 'get', 
        url: 'php/data.php', 
        data: { 
          id: '1' 
        }, 
        success: function(response) { 
          document.getElementById("div1").innerHTML = response; 
        } 
      }); 
     }); 
}); 


var $uploadCrop; 
$uploadCrop = $('#upload-demo').croppie({ 
    enableExif: true, 
    viewport: { 
     width: 200, 
     height: 200, 
     type: 'circle' 
    }, 
    boundary: { 
     width: 300, 
     height: 300 
    } 
}); 
$(document).on('change', '#upload', function() { 
    var reader = new FileReader(); 
    reader.onload = function (e) { 
     $uploadCrop.croppie('bind', { 
      url: e.target.result 
     }).then(function(){ 
      console.log('jQuery bind complete'); 
     }); 
    } 
    reader.readAsDataURL(this.files[0]); 
}); 
</script>

出典

2017-11-03 10:48:35 Mohammad

ありがとう、働いています！ –

あなたは大歓迎です！ – Mohammad

croppieプラグインがajax/innerHtmlコンテンツを使用して動作しません

答えて

関連する問題