图像裁剪不工作在jquery对话框

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

没有找到任何东西我会做我自己的实现了。