HDC调试需求开发（15万预算）,能者速来！>>>
Jcrop裁剪图片，在火狐下载入图片，第一次是小黑点：

第二次载入同一张图片，就可以正常载入了:

在谷歌和IE下没有这个问题。
我观察了页面元素，错误的时候，页面的div和显示图片的img的宽是0，高是17px。
下面是我的JS代码: /** * * Created by wangxy on 2017/3/4. */ function readURLMy (input) { // 判断你图片的大小和类型 var file = input. value ; console . log (file) ; if (! /.(jpg|jpeg|png|JPG|JPEG|PNG)$/ . test (file)) { $ ( "#error_photo_type" ). html ( ' 您选择的图片不符合规则，请重新选择 ' ) ; $ ( "#error_photo_type" ). show () ; //$('form').hide(); $ ( '#uploadPhoto' ). hide () ; $ ( '#canclePhoto' ). hide () ; $ ( '.cur_img_right' ). hide () ; $ ( '.js_cur_img' ). show () ; jcrop_api . destroy () ; $mainImg. removeAttr ( "style" ) ; // 移除掉所有的样式，让 jcrop 重新生成 $mainImg. removeAttr ( 'src' ) ; return false ; } else { // if (((input.files[0].size).toFixed(2)) >= (3 * 1024 * 1024)) { // $("#error_photo_type").html(' 您选择的图片不符合规则，请重新选择 '); // $("#error_photo_type").show(); // $('form').hide(); // $('.cur_img_right').hide(); // $('.js_cur_img').show(); // return false; // } } var ua = navigator . userAgent ; if (ua. indexOf ( "MSIE 8.0" ) > 0 || ua. indexOf ( "MSIE 9.0" ) > 0 ) { $ ( "#error_photo_type" ). hide () ; $ ( 'form' ). show () ; $ ( '.cur_img_right' ). show () ; $ ( '.js_cur_img' ). hide () ; $ ( '#uploadPhoto' ). show () ; $ ( '#canclePhoto' ). show () ; var fileInputElm = jQuery ( '#fcupload' ) ; var reallocalpath = jQuery ( '#fcupload' )[ 0 ]. value ; console . log (reallocalpath) ; fileInputElm. get ( 0 ). select () ; var pic = $mainImg. get ( 0 ) ; pic. style . filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src= \" " + reallocalpath + " \" )" ; pic. src = reallocalpath ; $mainImg. css ( "width" , "400px" ) ; $mainImg. css ( "height" , "400px" ) ; $mainImg. show () ; $pimg. get ( 0 ). style . filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src= \" " + reallocalpath + " \" )" ; $pimg. get ( 0 ). src = reallocalpath ; $pimg2. get ( 0 ). style . filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src= \" " + reallocalpath + " \" )" ; $pimg2. get ( 0 ). src = reallocalpath ; $pimg3. get ( 0 ). style . filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src= \" " + reallocalpath + " \" )" ; $pimg3. get ( 0 ). src = reallocalpath ; $preview. css ( "top" , "-3" ) ; $preview. css ( "left" , "413" ) ; $preview2. css ( "top" , "-65" ) ; // $preview2.css("left","574px"); $preview3. css ( "top" , "-191px" ) ; // $preview3.css("left","584px"); // 显示三个预览图 //$preview.show(); //$preview2.show(); //$preview3.show(); if ( jcrop_api != undefined ) { jcrop_api . destroy () ; } jcrop_api = $ . Jcrop ( '#target' , { setSelect : [ 20 , 20 , 200 , 200 ] , onChange : updatePreview , onSelect : updatePreview , boxWidth : 322 , aspectRatio : xsize / ysize }) ; var bounds = jcrop_api . getBounds () ; boundx = bounds[ 0 ] ; boundy = bounds[ 1 ] ; $preview. appendTo ( jcrop_api . ui .holder) ; $preview2. appendTo ( jcrop_api . ui .holder) ; $preview3. appendTo ( jcrop_api . ui .holder) ; jcrop_api . release () ; jcrop_api . disable () ; } else { if (((input. files [ 0 ]. size ). toFixed ( 2 )) >= ( 3 * 1024 * 1024 )) { $ ( "#error_photo_type" ). html ( ' 您选择的图片不符合规则，请重新选择 ' ) ; $ ( "#error_photo_type" ). show () ; //$('form').hide(); $ ( '#uploadPhoto' ). hide () ; $ ( '#canclePhoto' ). hide () ; $ ( '.cur_img_right' ). hide () ; $ ( '.js_cur_img' ). show () ; jcrop_api . destroy () ; $mainImg. removeAttr ( "style" ) ; // 移除掉所有的样式，让 jcrop 重新生成 $mainImg. removeAttr ( 'src' ) ; return false ; } $ ( "#error_photo_type" ). hide () ; $ ( 'form' ). show () ; $ ( '.cur_img_right' ). show () ; $ ( '.js_cur_img' ). hide () ; $ ( '#uploadPhoto' ). show () ; $ ( '#canclePhoto' ). show () ; if (input. files && input. files [ 0 ]) { var reader = new FileReader () ; reader. readAsDataURL (input. files [ 0 ]) ; reader. onload = function (e) { $mainImg. removeAttr ( "style" ) ; // 移除掉所有的样式，让 jcrop 重新生成 $mainImg. removeAttr ( 'src' ) ; $mainImg. attr ( 'src' , e.target. result ) ; $pimg. removeAttr ( 'src' ) ; $pimg. attr ( 'src' , e.target. result ) ; $pimg2. removeAttr ( 'src' ) ; $pimg2. attr ( 'src' , e.target. result ) ; $pimg3. removeAttr ( 'src' ) ; $pimg3. attr ( 'src' , e.target. result ) ; // 显示三个预览图 $preview. show () ; $preview2. show () ; $preview3. show () ; jcrop_api = $ . Jcrop ( '#target' , { setSelect : [ 20 , 20 , 200 , 200 ] , onChange : updatePreview , onSelect : updatePreview , boxWidth : 322 , aspectRatio : xsize / ysize }) ; var bounds = jcrop_api . getBounds () ; boundx = bounds[ 0 ] ; boundy = bounds[ 1 ] ; $preview. appendTo ( jcrop_api . ui .holder) ; $preview2. appendTo ( jcrop_api . ui .holder) ; $preview3. appendTo ( jcrop_api . ui .holder) ; } ; if ( jcrop_api != undefined ) { jcrop_api . destroy () ; } } } function updatePreview (c) { $ ( "#x" ). val (c. x ) ; $ ( "#y" ). val (c. y ) ; $ ( "#w" ). val (c. w ) ; $ ( "#h" ). val (c. h ) ; if ( parseInt (c. w ) > 0 ) { var rx = xsize / c. w ; var ry = ysize / c. h ; $pimg. css ({ width : Math. round (rx * boundx ) + 'px' , height : Math. round (ry * boundy ) + 'px' , marginLeft : '-' + Math. round (rx * c. x ) + 'px' , marginTop : '-' + Math. round (ry * c. y ) + 'px' }) ; var rx = xsize2 / c. w ; var ry = ysize2 / c. h ; $pimg2. css ({ width : Math. round (rx * boundx ) + 'px' , height : Math. round (ry * boundy ) + 'px' , marginLeft : '-' + Math. round (rx * c. x ) + 'px' , marginTop : '-' + Math. round (ry * c. y ) + 'px' }) ; var rx = xsize3 / c. w ; var ry = ysize3 / c. h ; $pimg3. css ({ width : Math. round (rx * boundx ) + 'px' , height : Math. round (ry * boundy ) + 'px' , marginLeft : '-' + Math. round (rx * c. x ) + 'px' , marginTop : '-' + Math. round (ry * c. y ) + 'px' }) ; } } ; }
下面是HTML代码,用的VM模板 #set ( $ layout = "/templates/layout/layout.vm" ) #set ( $ CSS = [ "/css/base.css" , "/css/personalCenter.css" , "/css/changeHeadImg.css" , "/css/changePassword.css" , "/css/modifyMessage.css" , "/css/uploadUserPhoto2.css" , "/css/jquery.Jcrop.css" ]) #set ( $ JS = [ "/js/jquery.Jcrop.js" , "/js/out2.js" , "/js/uploadUserPhoto2.js" , "/js/alertDiv.js" ]) #set ( $ page_title = " 个人中心 - 修改头像 " ) ##<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css"></link> ##<link rel="stylesheet" href="../css/changeHeadImg.css" type="text/css"></link> <link rel= "stylesheet" href= "../css/uploadUserPhoto.css" type= "text/css" ></link> ##<script type="text/javascript" src="../js/libJS/jquery.min.js"></script> ##<script type="text/javascript" src="../js/libJS/jquery.Jcrop.js"></script> <script type= "text/javascript" src= "../js/jquery-3.2.0.js" ></script> <script type= "text/javascript" src= "../js/out.js" ></script> <script type= "text/javascript" src= "../js/uploadUserPhoto.js" ></script> <script type= "text/javascript" src= "../js/jquery.form.js" ></script> <div class= "content clearfix" > #parse ( "/templates/inc/menu.vm" ) <div class= "right_content clearfix" > <div class= "account_m" > <ul class= "account_tab" > <li><a href= "personalCenter" > 个人资料 </a></li> <li class= "cur" ><a href= "personalPhoto" > 修改头像 </a></li> <li><a href= "personalPassword" > 修改密码 </a></li> </ul> <div class= "account_con clearfix" > <div class= "content_img tab" > <div class= "fl" > <p> 使用新头像 </p> <p> 你可以上传JPG、PNG、JPGE文件，文件需小于3MB </p> <p style= " display : none ; color : #999 " id= "AlertForIE89" > 请保证您的本地目录路径上载至服务器功能开启！ </p> <div class= "upLoad upload_img_left" > <label for= "fcupload" > <span> 上传头像 </span> </label> <form id= "myForm" action= "/personal/upload" class= "upload_form" method= "POST" enctype= "multipart/form-data" name= "form1" > <input class= "photo-file" type= "file" name= "file" style= " opacity : 0 ; filter : alpha ( opacity = 0 ) ; " accept= "image/jpg, image/jpeg, image/png" id= "fcupload" onchange= " readURLMy ( this ) ; " /> ## <input class="photo-file" type="file" name="file" accept="image/jpg, image/jpeg, image/png" id="fcupload" onchange="readURLMy(this);" /> <input id= "position" type= "hidden" name= "position" > <img id= "target" alt= "" style= " display : none ; width : 400 px ; height : 400 px" name= "" src= "" > <input type= "hidden" id= "x" name= "x" /> <input type= "hidden" id= "y" name= "y" /> <input type= "hidden" id= "w" name= "w" /> <input type= "hidden" id= "h" name= "h" /> <input type= "button" style= " display : none" value= " 保存头像 " id= "uploadPhoto" class= "submit_css" > <input type= "button" style= " display : none" id= "canclePhoto" value= " 取消 " class= "button_css" > </form> ##<input id="fileSelect" type="file" name="file" accept="image/jpg, image/jpeg, image/png" style="opacity:0;filter:alpha(opacity=0);" /> <p class= "error_msg" id= "error_photo_type" style= " display : none" > 图片格式错误，请重新选择 </p> </div> </div> <div class= "fr js_cur_img" > <div class= "cur_img_text" > <p> 当前头像 </p> </div> <div class= "cur_img" > <img src= " $! avatarUrl " alt= " 当前头像 " > </div> </div> <div class= "cur_img_right clearfix" > <p> 系统会根据 您上传的图片生成3种尺寸的头像，如图所示。 </p> <div id= "preview-pane" style= " display : none" > <div class= "preview-container" > <img src= "" class= "jcrop-preview" alt= "" /> </div> </div> <div id= "preview-pane2" style= " display : none" > <div class= "preview-container" > <img src= "" class= "jcrop-preview" alt= "" /> </div> </div> <div id= "preview-pane3" style= " display : none" > <div class= "preview-container" > <img src= "" class= "jcrop-preview" alt= "" /> </div> </div> <div class= "three_img clearfix" style= " position : relative" > <div class= "size_left clearfix" > <div class= "size_120 clearfix" > <span><img src= "http://static.qcdqcdn.com/passport/0/img/change_img.png" alt= "" ></span></div> <p> 160*160px </p> </div> <div class= "size_right clearfix" > <div class= "size_div1" > <div class= "size_30" ><span><img src= "http://static.qcdqcdn.com/passport/0/img/change_img.png" alt= "" ></span></div> <p> 70*70px </p> </div> <div class= "size_div2" > <div class= "size_60" ><span><img src= "http://static.qcdqcdn.com/passport/0/img/change_img.png" alt= "" ></span></div> <p> 100*100px </p> </div> </div> </div> </div> ## <span class="upload_msg" id="upload_result"><span id="revert_time">(3S)</span> 头像上传 <span id="result_upload"> 成功 </span></span> </div> </div> </div> </div> </div> <script> $ ( document ). ready ( function () { // var submit = jQuery('#submit'); // var fileInputElm = jQuery('#fcupload'); // submit.click(function (e) { // fileInputElm.get(0).click(); // }); $ ( 'form' ). show () ; $ ( '#canclePhoto' ). on ( 'click' , function () { window . location . reload () ; }) ; $ ( '.account_tab li' ). on ( 'click' , function () { $ ( this ). addClass ( 'cur' ). siblings (). removeClass ( 'cur' ) ; $ ( '.account_con .tab' ). eq ( $ ( this ). index ()). show (). siblings (). hide () }) var nextInputCode=( function () { $ ( '.next_step input' ). on ( 'click' , function () { $ ( '#js_content_password .tab_p' ). show () ; $ ( '#js_content_password .phone_identify' ). hide () ; }) })() ; var modifySuccess = function () { $ ( '#js_save_settings' ). on ( 'click' , function () { $ ( '#js_modify_password_success' ). show () ; }) ; $ ( '#js_select_button button' ). on ( 'click' , function () { $ ( '#js_modify_password_success' ). hide () ; }) } ; modifySuccess () ; }) </script> <script> //Jcrop 全局 API var jcrop_api = null , boundx , boundy , $ mainImg = $ ( '#target' ) , // Grab some information about the preview pane $ preview = $ ( '#preview-pane' ) , $ pcnt = $ ( '#preview-pane .preview-container' ) , $ pimg = $ ( '#preview-pane .preview-container img' ) , $ preview2 = $ ( '#preview-pane2' ) , $ pcnt2 = $ ( '#preview-pane2 .preview-container' ) , $ pimg2 = $ ( '#preview-pane2 .preview-container img' ) , $ preview3 = $ ( '#preview-pane3' ) , $ pcnt3 = $ ( '#preview-pane3 .preview-container' ) , $ pimg3 = $ ( '#preview-pane3 .preview-container img' ) , xsize = $ pcnt . width () , ysize = $ pcnt . height () , xsize2 = $ pcnt2 . width () , ysize2 = $ pcnt2 . height () , xsize3 = $ pcnt3 . width () , ysize3 = $ pcnt3 . height () ; </script>
奇怪的是谷歌IE都没有问题，只是火狐这样，很蛋疼！！！！！！
感谢大家！！！