Php 在ajax上传中实现JCrop

我正在尝试使用JQuery开发图像裁剪。 我使用ajax上传图像。图像成功后完全上传。我使用jquery将上传的图像加载到它的容器中

$("#image_upload").html("<img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />");

$（“#图像上传”）.html（“”）；

但是图像选择不起作用。为什么会这样？ 这是我的代码：

<style type="text/css">
    #preview {
        width: 150px;
        height: 150px;
        overflow: hidden;
    }
</style>
<script type="text/javascript" src="<?php echo base_url()?>asset/jqupload/js/ajaxfileupload.js">
</script>
<script type="text/javascript" src="<?php echo base_url()?>asset/jcrop/jquery.Jcrop.pack.js">
</script>
<link rel="stylesheet" href="<?php echo base_url()?>asset/jcrop/jquery.Jcrop.css" type="text/css" />
<script type="text/javascript">
    function ajaxFileUpload(){
        $("#loading").ajaxStart(function(){

            $(this).show();
        }).ajaxComplete(function(){
            $(this).hide();
        });

        $.ajaxFileUpload({
            url: '<?php echo site_url()?>/upload/do_upload',
            secureuri: false,
            fileElementId: 'fileToUpload',
            dataType: 'json',
            success: function(data, status){
                if (typeof(data.error) != 'undefined') {
                    if (data.error != '') {
                        $("#image_upload").html(data.error);
                        $("#image_upload").fadeIn("slow");
                    }
                    else {
                        $("#image_upload").html("<img src='" + data.path + "' width=\"460\" id=\"cropbox\" alt=\"cropbox\" />");
                        $("#image_upload").fadeIn("slow");
                        $("#orig_h").val(data.width);
                        $("#orig_w").val(data.height);
                        //alert("<a href='" + data.path + "' />");
                    }
                }
            },
            error: function(data, status, e){
                $("#image_upload").html(e);
                $("#image_upload").fadeIn("slow");
            }
        })

        return false;
    }

    $(document).ready(function(){
        $(function(){
            $('#cropbox').Jcrop({
                aspectRatio: 1,
                setSelect: [0, 0, $("#oring_w").val(), $("#oring_h").val()],
                onSelect: updateCoords,
                onChange: updateCoords
            });
        });

        function updateCoords(c){
            showPreview(c);
            $("#x").val(c.x);
            $("#y").val(c.y);
            $("#w").val(c.w);
            $("#h").val(c.h);
        }

        function showPreview(coords){
            var rx = $("#oring_w").val() / coords.w;
            var ry = $("#oring_h").val() / coords.h;

            $("#preview img").css({
                width: Math.round(rx * $("#oring_w").val()) + 'px',
                height: Math.round(ry * $("#oring_h").val()) + 'px',
                marginLeft: '-' + Math.round(rx * coords.x) + 'px',
                marginTop: '-' + Math.round(ry * coords.y) + 'px'
            });
        }
    });
</script>




<!-- begin main content -->
<div id="templatemo_content_area">
    <h1 class="content_title">Label Info<hr/></h1>
    <div id="templatemo_bi_full">
        <h2>Label Setting</h2>
        <div id="container">
        </div>
        <!--container-->
        <br/>
        <h2>Avatar</h2>
        <div class="info">
        </div>
        <div id="avatar_container">
            <form name="form" action="" method="POST" enctype="multipart/form-data">
                <ul>
                    <li class="leftHalf    ">
                        <label class="desc" for="lbl_type">
                            Change Your Avatar
                        </label>
                        <div>
                            <div id="avatar">
                                <img src="<?php echo $avatar?>" width="130" height="130" />
                            </div>
                            <div id="avatar_upload">
                                <input id="fileToUpload" name="fileToUpload" class="field field" value="" size="30" tabindex="5" type="file" /><input id="buttonUpload" name="buttonUpload" class="btTxt submit" type="submit" value="Upload" onclick="return ajaxFileUpload();"/><img id="loading" src="<?php echo base_url()?>asset/jqupload/images/loading.gif" style="display:none;">
                            </div>
                        </div>
                    </li>
                </ul>
                <ul id="crop_container">
                    <li class="leftHalf    ">
                        <label class="desc" for="lbl_name">
                            Avatar for crop
                        </label>
                        <div id="image_upload">
                            <img src="<?php echo $avatar?>" width="450" height="130" id="cropbox" name="cropbox" />
                        </div>
                    </li>
                    <li class="rightHalf     ">
                        <label class="desc" for="lbl_type">
                            Crop Display
                        </label>
                        <div id="preview">
                            <img src="<?php echo base_url() . 'files/' ?>" alt="thumb" />
                        </div>
                    </li>
                    <div class="info">
                    </div>
                    <li class="buttons ">
                        <input name="saveForm" class="btTxt submit" type="submit" value="Crop and Save" />
                    </li>
                </ul>
    <input type="text" id="x" name="x" />
    <input type="text" id="y" name="y" />
    <input type="text" id="w" name="w" />
    <input type="text" id="h" name="h" />
    <input type="text" id="oring_w" name="oring_w" />
    <input type="text" id="oring_h" name="oring_h" />
            </form>
        </div>
        <div class="cleaner">
        </div>
    </div>
    <div class="cleaner">
    </div>
</div>
<!-- end main content -->

#预演{
宽度：150px；
高度：150像素；
溢出：隐藏；
}
它不起作用，因为您通过ajax调用获取图像。在document.ready上调用jcrop函数时，映像不存在。在DOM中添加图像后，需要将jcrop代码放入ajax调用的success函数中。应该是这样的（未测试）：

$.ajaxFileUpload({
url:“/upload/do_upload”，
secureuri:false，
fileElementId:'fileToUpload'，
数据类型：“json”，
成功：功能（数据、状态）{
if（typeof（data.error）！=“未定义”）{
如果（data.error！=''）{
$（“#图像上传”）.html（data.error）；
$（“#图像上传”）.fadeIn（“慢”）；
}
否则{
$（“#image_upload”）.html（“”；//在此行之后添加jcrop代码很重要
$（“#图像上传”）.fadeIn（“慢”）；
$（“#orig_h”）.val（data.width）；
$（“原始高度”）.val（数据高度）；
$（'#cropbox'）.Jcrop({
方面：1，
setSelect:[0,0，$（“#oring_w”）.val（），$（“#oring_h”）.val（），
onSelect:updateCoords，
onChange:updateWord
});
}
}
},
错误：功能（数据、状态、e）{
$（“#图像上传”）.html（e）；
$（“#图像上传”）.fadeIn（“慢”）；
}
})
它不起作用，因为您通过ajax调用获取图像。在document.ready上调用jcrop函数时，映像不存在。在DOM中添加图像后，需要将jcrop代码放入ajax调用的success函数中。应该是这样的（未测试）：

$.ajaxFileUpload({
url:“/upload/do_upload”，
secureuri:false，
fileElementId:'fileToUpload'，
数据类型：“json”，
成功：功能（数据、状态）{
if（typeof（data.error）！=“未定义”）{
如果（data.error！=''）{
$（“#图像上传”）.html（data.error）；
$（“#图像上传”）.fadeIn（“慢”）；
}
否则{
$（“#image_upload”）.html（“”；//在此行之后添加jcrop代码很重要
$（“#图像上传”）.fadeIn（“慢”）；
$（“#orig_h”）.val（data.width）；
$（“原始高度”）.val（数据高度）；
$（'#cropbox'）.Jcrop({
方面：1，
setSelect:[0,0，$（“#oring_w”）.val（），$（“#oring_h”）.val（），
onSelect:updateCoords，
onChange:updateWord
});
}
}
},
错误：功能（数据、状态、e）{
$（“#图像上传”）.html（e）；
$（“#图像上传”）.fadeIn（“慢”）；
}
})
或者，您可以使用jQuery的.live函数，在将jCrop添加到DOM中后，立即将其添加到任何指定元素（图像）。
选中此项：
，或者您可以使用jQuery的.live函数在将jCrop添加到DOM中后立即将其添加到任何指定元素（图像）。
检查此项：
以上各项都不适用于我。如果您也面临此问题，请尝试此项

    $('#target').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: 1,


    },function(){
    // Use the API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    // Store the API in the jcrop_api variable

jcrop_api = this;
jcrop_api.setSelect([ 100,100,200,200 ]);
});

以上这些都不适合我。如果你也面临这个问题，试试这个

    $('#target').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: 1,


    },function(){
    // Use the API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    // Store the API in the jcrop_api variable

jcrop_api = this;
jcrop_api.setSelect([ 100,100,200,200 ]);
});