Question

我试图在引导程序弹出窗口中使用jQuery croppie，但它不会让步。布局在弹出窗口内创建，但是当我尝试上传照片时，它不起作用。

一旦我从popover中删除表单，一切都很好。我不确定我在这里错过了什么，所以任何帮助都会受到赞赏。

我为长期粘贴道歉，但我无法使用croppie工作，我会尝试将其添加到plunker。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="croppie.css">
    <style>
    .popover{
        min-width: 600px;
    }
    </style>
</head>
<body>
  <button class="popper" data-toggle="popover">Pop me</button>
  <div class="popper-content hide">
    <form action="test-image.php" id="form" method="post">
      <input type="file" id="upload" value="Choose a file">
      <div id="upload-demo"></div>
      <input type="hidden" id="imagebase64" name="imagebase64">
      <a href="#" class="upload-result">Send</a>
    </form>
  </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="croppie.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
     var $uploadCrop=$('#upload-demo');

    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();          
            reader.onload = function (e) {
                $uploadCrop.croppie('bind', {
                    url: e.target.result
                });
                $('.upload-demo').addClass('ready');
            }           
            reader.readAsDataURL(input.files[0]);
        }
    }
        $uploadCrop.croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'circle'
        },
        boundary: {
            width: 300,
            height: 300
        }
    });

    $('.upload-result').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'canvas',
            size: 'original'
        }).then(function (resp) {
            $('#imagebase64').val(resp);
            console.log($('#imagebase64').val())
        });
    });
       $('#upload').on('change', function () { readFile(this); });  

$('.popper').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});
});
</script>

</html>

jquery Croppie不在popover内工作

0 个答案: