i have used tutorial mentioned here crop , upload image using html 5 , jquery. have implemented , working fine if using image_div on same page. cropping functionality not working if opening image in dialog box. image appearing in dialog box cropping not possible. here code.
script.js
//make global variables selected image 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; // selected file parameters var selectedimg = $('#image_file')[0].files[0]; //check select file jpg,png or gif image var regex = /^(image\/jpeg|image\/png)$/i; if (! regex.test(selectedimg.type)) { $('.error').html('please select valid image file (jpg , png allowed)').fadein(500); flag++; iserror = true; } // check size of selected image if greater 250 kb or not // else if (selectedimg.size > 250 * 1024) { // $('.error').html('the file selected big. max file size limit 250 kb').fadein(500); // flag++; // iserror = true; // } if(flag===0){ iserror=false; $('.error').hide(); //if file correct hide error message // preview selected image object of html5 filereader class // make html5 filereader object var oreader = new filereader(); oreader.onload = function(e) { // e.target.result dataurl (temporary source of image) thumbid.src = previewid.src=e.target.result; // filereader onload event handler previewid.onload = function () { $( "#dialog" ).dialog( "open" ); //--> dialog box opened // display image fading effect $('#image_div').fadein(500); selectimgwidth = previewid.naturalwidth; //set global image width selectimgheight = previewid.naturalheight;//set global image height // create variables (in scope) hold jcrop api , image size // destroy jcrop if existed if (typeof jcrop_api !== 'undefined') jcrop_api.destroy(); // initialize jcrop plugin on 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 jcrop api real image size var bounds = this.getbounds(); boundx = bounds[0]; boundy = bounds[1]; // store jcrop api in jcrop_api variable jcrop_api = this; }); }; }; // read selected file dataurl oreader.readasdataurl(selectedimg); } }); }); function showthumbnail(e) { var rx = 155 / e.w; //155 width of outer div of profile pic var ry = 190 / e.h; //190 height of outer div of 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 image').fadein(500); return false; }else if(iserror){ return false; }else { return true; } } html content
<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> code upload image:
<input type="file" id="image_file" name="picture1"/> dialog code:
$(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"); } } }); }); i wants dialog box appear every image upload appearing first image out of 4 images trying upload. please me.
"it appearing first image out of 4 images trying upload."
might try changing line
$("#image_file").change(function(){ to
$('#image_file').unbind('change').bind('change', function() { 
Comments
Post a Comment