Question

我使用了crop and upload image using html 5 and jquery中提到的教程。我已经实现了它，如果我在同一页面上使用image_div它工作正常。如果我在对话框中打开图像，裁剪功能将无法正常工作。图像出现在对话框中，但无法进行裁剪。这是我的代码。

的script.js

    //Make global variables for selected image for further usage
var selectImgWidth,selectImgHeight,jcrop_api, boundx, boundy,isError=false;
$(document).ready(function(){
    $("#image_file").change(function(){
        var previewId = document.getElementById('load_img');
        var thumbId = document.getElementById('thumb');
        previewId.src = '';
        $('#image_div').hide();
        var flag = 0;

        // Get selected file parameters
        var selectedImg = $('#image_file')[0].files[0];

        //Check the select file is JPG,PNG or GIF image
        var regex = /^(image\/jpeg|image\/png)$/i;
        if (! regex.test(selectedImg.type)) {
            $('.error').html('Please select a valid image file (jpg and png are allowed)').fadeIn(500);
            flag++;
            isError = true;
        }

        // Check the size of selected image if it is greater than 250 kb or not
//      else if (selectedImg.size > 250 * 1024) {
//          $('.error').html('The file you selected is too big. Max file size limit is 250 KB').fadeIn(500);
//          flag++;
//          isError = true;
//      }

        if(flag===0){
        isError=false;
        $('.error').hide(); //if file is correct then hide the error message


        // Preview the selected image with object of HTML5 FileReader class
        // Make the HTML5 FileReader Object
        var oReader = new FileReader();
            oReader.onload = function(e) {

            // e.target.result is the DataURL (temporary source of the image)
                thumbId.src = previewId.src=e.target.result;

                // FileReader onload event handler
                previewId.onload = function () {
                     $( "#dialog" ).dialog( "open" ); //--> this is where dialog box is opened
                // display the image with fading effect
                $('#image_div').fadeIn(500);
                selectImgWidth = previewId.naturalWidth; //set the global image width
                    selectImgHeight = previewId.naturalHeight;//set the global image height

                // Create variables (in this scope) to hold the Jcrop API and image size

                // destroy Jcrop if it is already existed
                if (typeof jcrop_api !== 'undefined') 
                    jcrop_api.destroy();

                // initialize Jcrop Plugin on the selected image
                $('#load_img').Jcrop({
                    minSize: [32, 32], // min crop size
                   // aspectRatio : 1, // keep aspect ratio 1:1
                    bgFade: true, // use fade effect
                    bgOpacity: .3, // fade opacity
                    onChange: showThumbnail,
                    onSelect: showThumbnail
                }, function(){

                    // use the Jcrop API to get the real image size
                    var bounds = this.getBounds();
                    boundx = bounds[0];
                    boundy = bounds[1];

                    // Store the Jcrop API in the jcrop_api variable
                    jcrop_api = this;
                });
            };
        };

        // read selected file as DataURL
        oReader.readAsDataURL(selectedImg);
    }
    });
});

function showThumbnail(e)
{
    var rx = 155 / e.w; //155 is the width of outer div of your profile pic
    var ry = 190 / e.h; //190 is the height of outer div of your profile pic
    $('#w').val(e.w);
    $('#h').val(e.h);
    $('#w1').val(e.w);
    $('#h1').val(e.h);
    $('#x1').val(e.x);
    $('#y1').val(e.y);
    $('#x2').val(e.x2);
    $('#y2').val(e.y2);
    $('#thumb').css({
        width: Math.round(rx * selectImgWidth) + 'px',
        height: Math.round(ry * selectImgHeight) + 'px',
        marginLeft: '-' + Math.round(rx * e.x) + 'px',
        marginTop: '-' + Math.round(ry * e.y) + 'px'
    });
}

function validateForm(){
    if ($('#image_file').val()==='') {
        $('.error').html('Please select an image').fadeIn(500);
        return false;
    }else if(isError){
        return false;
    }else {
        return true;
    }
}

html内容

        <div id="dialog" title="Uploaded Image">
    <img src="" id="load_img" style="float: left;width :400px;height:400px"/>
    <img src="images/pro.jpg" id="thumb" style="float:left;width: 200px;height: 200px"/>
    </div>

上传图片的代码：

 <input type="file" id="image_file" name="picture1"/>

对话框代码：

                $(function(){
                $("#dialog").dialog({
                dialogClass: 'DynamicDialogStyle',
                autoOpen: false,
                modal:true,
                width:600,
                height:600,
                position:'center',
                buttons:{
                "Uploads": function(){
                         $(this).dialog("close");
                        },
                "Cancel" : function(){
                          $(this).dialog("close");
                        }
                    } 
                });
            });

我还想为我上传的每张图片显示对话框，但它只显示我尝试上传的4张图片中的第一张图片。请帮帮我。

Answer 1

“它仅出现在我试图上传的4张图片中的第一张图片。”

可能会尝试更改此行

$("#image_file").change(function(){

到

$('#image_file').unbind('change').bind('change', function() {

Answer 2

在找不到任何东西后，我将不得不自己实施。

图像裁剪在jquery对话框中不起作用

2 个答案: