Question

我想动态上传图片并在使用jquery库后裁剪它。

这是代码

 $(document).ready(function() {

 $('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true }); //this code is from crop library


        $('#photoimg').live('change', function()            { 
                   $("#preview").html('');
            $("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
        $("#imageform").ajaxForm({
                    target: '#preview'
    }).submit();

        });


    });

这是HTML部分

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload your image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
 <img class="preview" src="uploads/1391586558.png" />
</div>

更新图像的php部分

echo "<img src='uploads/".$actual_image_name."'  class='preview'>";

我可以在开始时裁剪图像，但是当它用ajax（具有相同的类名）替换另一个时，它就会停止工作。

有什么建议吗？

Answer 1

不推荐使用<{1}}中的第一个，您应该使用

$.live()

它无效，因为您放置$('#photoimg').on('change', function(){});的元素已被删除。

当.imgAreaSelect.充满您更新的图片时，您应该再次启用它。

div#preview

整个例子：

$("#imageform").ajaxForm({
    target: '#preview',
    success: function() { 
        $('#preview').find('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true });
    } 
}).submit();

Answer 2

您需要再次致电

$('.preview').imgAreaSelect({ aspectRatio: '4:3', handles: true });

更换图像后。

当我用ajax刷新元素时，jQuery无法按类找到元素

2 个答案: